关于Vue的你问我答

1.那你能讲一讲MVVM吗？

MVVM是Model-View-ViewModel缩写，也就是把MVC中的Controller演变成ViewModel。Model层代表数据模型，View代表UI组件，ViewModel是view和model层的桥梁，数据会绑定到viewmodel层并自动将数据渲染到页面中，视图变化的通知viewmodel层更新数据。

2.简单说一下vue2.x响应式数据原理

Vue在初始化数据时，会使用object.defineProperty重新定义data中的所有属性，当页面使用对应属性时，首先会进行依赖收集（收集当前组件的watcher）如果属性发生变化会通知相关依赖进行更新操作（发布订阅）。

3.那你知道Vue3.x响应式数据原理吗？

Vue3.x改用Proxy替代object.defineProperty。因为Proxy可以直接监听对象和数组的变化，并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。

Proxy只会代理对象的第一层，那么Vue3又是怎么处理这个问题的呢？

判断当前Reflect.get的返回值是否为Object，如果是则再通过reactive方法做代理。这样就实现了深度观测。

监测数组的时候可能触发多次get/set，那么如何防止触发多次呢？

我们可以判断key是否为当前被代理对象target自身属性，也可以判断旧值与新值是否相等，只有满足以上两个条件之一时，才有可能执行trigger。

3.再说一下vue2.x中如何监测数组变化？

使用了函数劫持的方式，重写了数组的方法，vue将data中的数组进行了原型链重写，指向了自己定义的数组原型方法。这样当调用API时，可以通知依赖更新。如果数组中包含着引用类型，会对数组中的引用类型再次递归遍历进行监控。这样就实现了监测数组的变化。

4.nextTick知道吗？实现原理是什么？

在下次DOM更新循环结束之后执行延迟回调。nextTick主要使用了宏任务和微任务。根据执行环境分别尝试采用

• Promise
• MutationObserver
• setImmediate
• 如果以上都不行则采用setTimeout
  定义了一个异步方法，多次调用nextTick会将方法存入队列中，通过这个异步方法清空当前队列。

5.说一次vue的生命周期

beforeCreate：是new Vue()之后触发的第一个钩子，在当前阶段data、methods、computed以及watch上的数据和方法都不能被访问。

created：在实例创建完成后发生，当前阶段已经完成了数据观测，也就是可以使用数据、更改数据，在这里更改数据不会触发updatad函数。可以做一些初始数据的获取，在当前阶段无法与Dom进行交互，如果非要想，可以通过vm.$nextTick来访问DOM

beforeMount：发生在挂载之前，在这之前template模板已导入渲染函数编译。而当前阶段虚拟DOM已经创建完成，即将开始渲染。而此时也可以对数据进行更改，不会触发updated

mounted:在挂载完成后发生，在当前阶段，真实的DOM挂载完毕，数据完成双向绑定，可以访问到dom节点，可以使用$refs属性对dom进行操作。

beforeupdate：发生在更新之前，也就是响应式数据发生更新，虚拟dom重新渲染之前被触发，你可以在当前阶段进行更改数据，不会造成重污染。

updated：发生在更新之后，当前阶段组件dom已完成更新。要注意的是避免在此期间更改数据，因为这可能导致无限循环的更新。

beforeDestroy：发生在实例销毁之前，在当前阶段实例完全可以被使用，我们可以在这时进行善后收尾工作，比如清除计时器。

destroyed：发生在实例销毁之后，这个时候只剩下dmo空壳。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁

6.你的接口请求一般放在哪个生命周期？

接口请求一般放在mounted中，但需要注意的是服务端渲染时不支持mounted，需要放到created

7.再说一下computed和watch

computed本质是一个具备缓存的watcher，依赖的属性发生变化就会更新视图。适用于计算比较消耗性能的计算场景。当表达式过于复杂时，在模板中放入过多逻辑会让模板难以维护，可以将复杂的逻辑放入计算属性中处理。

watch没有缓存性，更多的是观察的作用，可以监听某些数据执行回调。当我们需要深度监听对象中的属性时，可以打开deep：true选项，这样便会对对象中的每一项进行监听。这样会带来性能问题，优化的话可以使用字符串形式的监听，如果没有写到组件中，不要忘记使用unwatch手动注销哦。

8.说一下v-if和v-show的区别？

当条件不成立时，v-if不会渲染DOM元素，v-show操作的是样式（display），切换当前DOM的显示与隐藏。

9.组件中的data为什么是个函数？

一个组件被多次复用的话也就会创建多个实例。本质上，这些实例用的都是同一个构造函数。如果data是对象的话，对象属于引用类型，会影响到所有实例。所以为了保证组件不同实例之间data不冲突，data必须是一个函数。

10.说一下v-model的原理

v-model本质上就是一个语法糖，可以看成是value+input方法的语法糖。可以通过model属性的prop和event属性进行自定义。原生的v-model会根据标签的不同生成不同的事件和属性。

11.vue事件绑定原理说一下

原