通过几个面试题剖析vue源码

1. 说一下对MVVM原理的理解

• 传统的MVC指的是，用户操作会请求服务器路由，路由会调用对应的控制器来处理，控制器会获取数据，将结果返回给前端，页面重新渲染

• MVVM：Model是数据模型；view代表UI组件界面视图；viewModel监听数据模型和控制视图行为，通过双向数据绑定把view和model连接起来，开发者只需要关注业务逻辑，不用手动操作DOM，数据状态的维护完全由MVVM来管理

2. 响应式数据原理

采用数据劫持结合 发布-订阅者模式，通过Object.defineProperty()来劫持各个属性的getter、setter，在数据变动时候发布消息给订阅者，触发相应的监听回调。

vue的数据双向绑定 将MVVM作为数据绑定的入口，整个Observer，Compile和Watcher三者，通过Observer来监听Model数据的变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到 双向绑定效果

vue中步骤：initData 初始化用户的data数据，new Observer 进行数据观测，walk()进行对象的处理，defineReactive()循环对象属性响应式变化，Object.defineProperty()重新定义数据

3. 如何监听数组的

劫持数组，如果是数组重写数组的方法，然后通知视图更新；
其中有个判断 是否支持原型链，然后改变原型指向，指向数组的重写方法；
如果数组中有对象，依然遍历对象监听对象；

4. 为什么vue采用异步渲染

vue是组件级别更新；
如果不采用异步更新，那么每次更新数据都会对当前组件进行重新渲染，为了性能考虑，vue会在本轮数据更新后，再去异步更新视图。

5. nextTick原理

主要使用了宏任务和微任务，定义了一个异步方法，多次调用nextTick会将方法放入队列中，通过这个异步方法清空当前队列。

6. vue中computed 、watch 区别

computed是具备缓存的watcher，只是加了变量来区分computed，watch；
实现原理都是基于watcher；

7. watch中的deep: true 是如何实现的

当用户指定了watch中的deep属性是true时，如果当前监控的值是数组类型，会对对象中的每一项进行求值，此时会将当前的watcher存入到对应属性的依赖中，这样数组中对象发生变化时也会通知数据更新

深层原理就是递归，耗性能

watcher ：渲染watcher 、计算属性watcher、自定义watcher

8.vue组件生命周期

9. 数据请求放在哪个生命周期中

无特定要求
一般服务器渲染的放在created
其他一般都是放在mounted