小猿圈web前端开发之Vue前端面试题

小猿圈002

前段时间分享了一个web前端的面试题，小伙伴们让我分享一些高阶的面试题，今天小猿圈web前端讲师总结了Vue方面经常出现的面试题，希望对大家有所帮助。

1.说一下Vue的双向绑定数据的原理

vue实现数据双向绑定主要是：采用数据劫持结合“发布者-订阅者”模式的方式，通过Object.defineProperty()来劫持各个属性的setter、getter，在数据变动时发布消息给订阅者，触发相应监听回调。

2.解释单向数据流和双向数据绑定

单向数据流：顾名思义，数据流是单向的。数据流动方向可以跟踪，流动单一，追查问题的时候可以更快捷。缺点就是写起来不太方便。要使UI发生变更就必须创建各种action来维护对应的state。

双向数据绑定：数据之间是相通的，将数据变更的操作隐藏在框架内部。优点是在表单交互较多的场景下，会简化大量与业务无关的代码。缺点就是无法追踪局部状态的变化，增加了出错时debug的难度。

3.Vue如何去除URL中的

vue-router默认使用hash模式，所以在路由加载的时候，项目中的URL会自带“#”。如果不想使用“#”，可以使用vue-router的另一种模式history：

new

Router

({

mode:

'history'

,

routes:[]

})

需要注意的是，当我们启用history模式的时候，由于我们的项目是一个单页面应用，所以在路由跳转的时候，就会出现访问不到静态资源而出现“404”的情况，这时候就需要服务端增加一个覆盖所有情况的候选资源：如果URL匹配不到任何静态资源，则应该返回同一个“index.html”页面。

4.对MVC、MVVM的理解

MVC特点：

View传送指令到Controller；

Controller完成业务逻辑后，要求Model改变状态；

Model将新的数据发送到View，用户得到反馈。

所有通信都是单向的。

MVVM特点：

各部分之间的通信，都是双向的；

采用双向绑定：View的变动，自动反映在ViewModel，反之亦然。

5.Vue生命周期的理解

Vue实例有一个完整的生命周期，生命周期也就是指一个实例从开始创建到销毁的这个过程。

beforeCreated()：在实例创建之间执行，数据未加载状态。

created()：在实例创建、数据加载后，能初始化数据，DOM渲染之前执行。

beforeMount()：虚拟DOM已创建完成，在数据渲染前最后一次更改数据。

mounted()：页面、数据渲染完成，真实DOM挂载完成。

beforeUpadate()：重新渲染之前触发。

updated()：数据已经更改完成，DOM也重新render完成，更改数据会陷入死循环。

beforeDestory()和destoryed()：前者是销毁前执行（实例仍然完全可用），后者则是销毁后执行。

6.组件通信

父组件向子组件通信

子组件通过props属性，绑定父组件数据，实现双方通信。

子组件向父组件通信

将父组件的事件在子组件中通过$emit触发。

非父子组件、兄弟组件之间的数据传递

/*新建一个Vue实例作为中央事件总嫌*/

letevent=

new

Vue

();

/*监听事件*/

event.$on(

'eventName'

,(val)=>{

//......dosomething

});

/*触发事件*/

event.$emit(

'eventName'

,

'thisisamessage.'

)

7.vue-router路由实现

路由就是用来跟后端服务器进行交互的一种方式，通过不同的路径，来请求不同的资源，请求不同的页面是路由的其中一种功能。

8.v-if和v-show区别

使用v-if的时候，如果值为false，那么页面将不会有这个html标签生成。

v-show则是不管值为true还是false，html元素都会存在，只是CSS中的display显示或隐藏。

9.$route和$router的区别

$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法。

$route为当前router跳转对象里面可以获取name、path、query、params等。

10.NextTick是做什么的

$nextTick是在下次DOM更新循环结束之后执行延迟回调，在修改数据之后使用$nextTick，则可以在回调中获取更新后的DOM。

小猿圈web前端讲师提醒大家合理利用自己每一分每一秒的时间来学习提升自己web前端自学②群：738735873，不要再用"没有时间“来掩饰自己思想上的懒惰！趁年轻，使劲拼，给未来的自己一个交代！