日常学习---vue面试题整理

我不知道其他人会不会因为自己即将迈入或已经迈入30这个年龄段而焦虑；我不知道其他人会不会因为那些莫须有的责任而时时刻刻的绑架自己；我不知道其他人会不会因为家庭、周围的亲人而放弃自己一直想要做的事；这些问题，（当然也远远不止这些问题）就是很长一段时间使我烦恼，焦虑的问题。这段时间应该是我长这么大，思考最多、改变最多、行动最多的一段时间了。我离开了我一直生活的城市，我避开了那些多少跟我有点关系，或者多多少少让我忧伤的城市。我选择了一个完全陌生的城市。我在犹豫要不要来深圳的时候，我很忐忑，因为我谁都不认识，我对这个城市一无所知，这也是最让我恐慌的。但是最后，我还是决定挑战一下自己，因为，我想在这个年龄，更多的为我自己着想，更多的考虑自己的感受，更靠近那个自己想成为的人。现在我的落脚问题已经基本解决，不出意外的话，明天，就要开始我的面试之旅了。愿自己能够安之若素，尽快开始自己的新工作，新生活。

今天准备一下面试题的资料，先以vue开始，也算是查缺补漏，看看自己的肚子里到底装了几滴墨水。后期也会持续总结每天的面试题。希望各位读者朋友可以指出理解不当的地方，感谢大家。

一、大纲：

1. 对MVVM的理解
2. 响应式数据的原理
3.vue中是如何检测数组变化的？
4.vue为什么要采用异步渲染？
5. nextTick的实现原理是什么？
6.vue中的模板编译原理
7.vue的生命周期钩子是如何实现的
8.vue为什么要操作虚拟DOM
9.vue.mixin的使用场景和原理是什么？
10.vue.set方法
11. vue组件父子之间的传值
12. vue的生命周期有哪些？一般在哪一步发起请求？

二、详解

2.1 对MVVM的理解
答：MVVM是前端的视图分层开发的思想，主要把前端页面分为Model层、ViewModel层、View层。ViewModel层是Model层和View层的协调者，它提供了数据的双向数据绑定。

2.2 响应式数据的原理
答：响应式就是当数据变化的时候，可以让视图也同步更新。核心是Object.defineProperty，vue初始化的时候，Object.defineProperty依次会给data的属性上增加get和set方法，并对依赖进行收集，如果数据发生变化，就会去通知相关的依赖做出对应的更新。

2.3 vue中是如何检测数组变化的
答：vue将数组原型上的方法进行了重新编写，更改了一些数组的方法，比如push、shift、pop、splice、unshift、sort、reverse，这些方法都有一个特点，就是可以改变数组原来的值。当我们用了这些方法来操作数组时，就会把原来的方法进行劫持，可以在函数内部添加自己的功能。如果想跟新数组的索引，需要使用vue.$set方法来实现。

2.4 vue为什么要采用异步渲染
答：vue是组件级的更新，采用异步渲染，可以提高性能。

2.5 nextTick的实现原理是什么
答：nextTick中的回调函数是在下一次DOM更新结束之后执行的，延迟了回调，从而防止多次更新。nextTick里面就是一个异步方法（promise）。

2.6 vue中的模板编译原理
答：模板指的就是template。如果我们传了一个template，我们会把template转换成一个render函数，然后通过render函数返回虚拟DOM
，再把虚拟的DOM变成真正的DOM。

2.7 vue的生命周期钩子是如何实现的？
答：vue的生命周期钩子实际上就是一个回调函数。当我们传入一个钩子函数时，vue内部会帮我们调用，并将生命周期钩子转换成数组，调用的时候，就又会把数组遍历一遍，类似一个发布订阅的模式。

2.8 vue为什么要操作虚拟DOM?
答：虚拟DOM就是用一个对象，来描述真实DOM。一个真实的DOM上面有非常多的属性，操作起来非常不便，为了减少DOM操作，我们在更新的时候就把需要更新的DOM先记录下来，然后更新这些需要更新的DOM，最后再根据diff算法比对，更新DOM。（vue里的diff算法是平级比较，不考虑跨级比较）虚拟DOM不依赖真实的平台环境，可以实现跨平台。

2.9 vue.mixin的使用场景和原理是什么？
答：vue.mixin可以增加公共方法，当组件初始化调用的时候，mergeOptions方法会进行合并，并针对不同的属性进行合并。vue.mixin有很多缺点，比如依赖问题、命名问题、数据不能共享、数据来源等问题。

2.10 vue.set方法
答：vue不允许在已经创建的实例上动态添加新的根级响应式属性，$set可以触发更新，当对象新增不存在的属性时，会触发对象依赖的watcher去更新，当更改数组索引时，我们调用数组的splice方法去更新数组。
操作数组示列：

this.$set(arr,  index,  val)

操作对象示例：

this.$set( obj, key, val)

2.11 vue组件父子之间的传值
答：父传子 v-bind(属性绑定)，子传父 v-on（事件绑定）
兄弟之间 EvenBus，
传递方 :
$emit
接收方：
$on

2.12 vue的生命周期有哪些？一般在哪一步发起请求？
答：① 创建期间的生命周期函数：
beforeCreate()：此时，实例在内存中刚刚创建出来，data和methods没 有被初始化。
created()：此时，实例已经在内存中创建完成，data和methods已经被初始化完成。模板还没有编译。
beforeMount（）：此时，模板已经编译成功，还没有挂载到页面上。
mounted()：此时，编译好的模板已经挂载到了指定的位置上去。
② 运行期间的生命周期函数：
beforeUpdate()：此时，data数据发生改变后，还没有重新渲染DOM树，data的数据是最新的，但是页面上展示的还是旧数据。
updated()：此时，data中的数据和页面中的渲染是一致的。
③ 销毁期间的生命周期函数：
beforeDestroy()：此时，实例的方法、指令都还可以使用，实例销毁之前调用。
destroyed()：此时，vue实例上的所有指令、绑定、监听都会被销毁，子实例也全部被销毁。