vue面试题

1.VUE中的数据发生了改变，vm却知道数据发生改变了？（VUE中的双向数据绑定的原理是什么？）

VUE创建vm的时候，会将数据配置到实例中

然后通过内部的Object.defineProperty()方法，对数据绑定了get与set

当获取数据的时候，会触发对应的get方法

当设置数据的时候，会触发set方法

一旦set方法触发完毕之后，内部会进一步触发watcher，从而实现数据改变，视图重新渲染。

2.动态改变属性值得时候为什么不会更新视图？怎么让其变成响应式的？

name属性是被vue实例进行挂载了，所以会动态的为其添加get与set方法（数据劫持）。

name属性改变 ==> 调用set方法 ==> 调用watcher ==> 视图更新

后续通过vm.user.age = 18 改变数据，没有进行内部的数据劫持，去进行动态的添加get与set方法，所以数据改变，视图也不会更新。

方法：vue当中提供了一个全局的api方法 Vue.set(), 就可以为动态添加的数据也会被vue管理，双向数据绑定了。

3.请你说一下v-model底层实现原理？有哪些修饰符？（v-model指令只能用在组件或者表单控件中）

绑定了value属性与监听了input事件

 <p>{{msg2}}</p>
 <p><input type="text" v-bind:value="msg2" @input="msg2=$event.target.value"></p>

v-model.lazy:默认是实时更新，加了lazy之后是失去焦点之后，内部才会更新。

v-model.number:这个值无法被parseFloat解析的时候原样输出，否则转换。

v-model.trim:去掉前后空格。

4.computed（计算属性） 和 watch的区别

1.watch 只能监听单个属性，每次监听只能监听一个变量的修改，不能同时监听多个变量的修改。

2.当需要数据变化时执行 异步 或者较大的操作时，只能采用watch

5.为什么v-for指令中添加key？

虚拟DOM对比的时候，添加元素，删除元素的时候，key可以提高对比效率。

因为如果没有加key，内部插入新的元素，后面的元素都会经历卸载与重新装载的过程，效率大大降低。

添加key之后，内部本着key值相同，DOM节点复用原则。

6.v-if与v-show的区别？

v-if的值为false的话，就会将元素在DOM树中直接删除

v-show的值为false的话，给元素添加display:none

v-else只能跟v-if一起使用

v-for不能与v-if一起使用，因为v-for优先级比v-if高。

*7.为什么一个组件的data，必须是函数？

因为每个实例对象可以维护一份被返回对象的独立的拷贝。

8.组件的生命周期可以分为几个阶段？

初始化阶段：beforeCreate created beforeMount (render) mounted

运行中阶段：beforeUpdate updated

销毁阶段： beforeDestroy destroyed

9.为什么要用自定义指令？

需要操作底层DOM的时候，用自定义指令。（初始化的时候让输入框获取焦点 ）

10.scoped属性的原理https://www.jianshu.com/p/b92e2a022cd8

给当前组件的标签上面添加了额外的一些属性，所以在添加css样式的时候，不仅要匹配class，同时还要匹配额外添加的属性。

vue中的scoped 通过在DOM结构以及css样式上加唯一不重复的标记:data-v-hash的方式，以保证唯一（而这个工作是由过PostCSS转译实现的），达到样式私有化模块化的目的。

11.编辑器怎么识别vue

通过vue-loader来识别后缀为vue的文件。

12.路由模式有几种？原理是什么？

hash(默认)----调用了window.onhashChange方法进行hash值得切换

history---------本质使用H5的history.pushState方法来更改url

13.hash模式和history模式的区别

hash模式较丑（地址栏里有#）

hash兼容IE8以上，history兼容IE10以上

history模式需要后端配合将所有访问都指向index.html，否则用户刷新页面，会导致404错误

14.声明周期（钩子函数）? keep-alive动态组件的钩子函数？

八个：beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed

keep-alive: activated, deactivated

15. 自定义组件的钩子函数？什么时候用自定义组件？

5个: bind, inserted, update, componentUpdated, unbind（bind与inserted：bind时父节点为null，inserted时父节点存在；）

需要操作真实dom的时候使用自定义组件。

不太会使用？它的使用方法不太清楚啊

16.路由守卫/导航守卫？

全局路由钩子：beforeEach((to,from,next)=>{}), afterEach((to,from)=>{})

单个路由钩子：

routes:[
	{
		path:"/foo",
		component:Foo,
		beforeEnter:(to,from,next)
	}
]

路由组件钩子：beforeRouteEnter(to,from,next){}, beforeRouteUpdate(to,from,next){}, beforeRouteLeave(to,from,next)

17.数组去重

最简单的new Set()方法：Array from(new Set())（最高效的数组去重：set遵循元素唯一，不重复）

18.es6新增的数组方法

forEach()会遍历数组，循环体内没有返回值，forEach()循环不会改变原来数组的内容，forEach()有三个参数，第一个是当前元素，第二个参数是当前元素的索引，第三个参数是当前元素所属的数组（item,index,arr）

map()主要作用其实是创建一个新的数组，map()的参数和forEach()是一样的（item，index，arr）

filter()参数和forEach()也是一样的，主要是过滤，用来过滤数组中不满足条件的元素，把满足条件的元素放到新的数组里，并且不会改变原数组。

19.原型链