|
实现：Vue是MVVM框架，双向数据绑定，当ViewModel对Model进行更新时，通过数据绑定更新到View。虚拟DOM是一个映射真实DOM的JS对象，提供了响应式和组件化的视图组件。
一、Vue初始化过程，双向数据绑定原理
vue.js采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，dep.addsub来收集订阅的依赖，watcher监听数据的变化，在数据变动时发布消息给订阅者，触发相应的监听回调。
监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。订阅者Watcher可以接收属性的变化通知并执行相应的函数，从而调用对应的update更新视图。
computed计算属性，当依赖数据结果发生改变时，才会重新计算返回一个结果。不支持异步操作。
watch监听data和props数据，当数据发生改变时出发watch操作，支持异步。
二、vue-router实现原理
路由实现核心原理：更新视图但不重新请求页面。路径之间进行切换实质就是组件之间的切换。vue-router实现单页面路由跳转模式分为两种：一是哈希模式（hash），二是历史模式（history），两者可通过mode进行设置。
hash模式通过锚点值的改变，根据不同的值渲染指定DOM位置的不同组件内容。每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用后退按钮时可以回到上一个位置。
history模式利用window.history.pushState API来完成路由跳转而无须重新加载页面。
三、vuex实现原理
Vue.use(vuex)会调用vuex的install方法。
在beforeCreate钩子钱混入vuexInit方法，vuexInit方法实现了store注入vue组件实例，并注册了vuex store的引用属性 $store。
Vuex的state状态是响应式，是借助vue的data是响应式，将state存入vue实例组件的data中。
Vuex的getters则是借助vue的计算属性computed实现数据实时监听。
四、nextTick的原理以及运行机制
vue进行DOM更新内部也是调用nextTick来做异步队列控制。只要观察到数据变化，Vue将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个watcher被多次触发，只会被推入到队列中一次。
DOM至少会在当前事件循环里面的所有数据变化完成之后再统一更新视图。而当我们自己调用nextTick的时候，它就在更新DOM的微任务队列（microtask）后追加了我们自己的回调函数，从而确保我们的代码在DOM更新后执行，同时也避免了setTimeout可能存在的多次执行问题。确保队列中的微任务在一次事件循环前被执行完毕。
五、Vue父子组件生命周期执行顺序
生命周期：
- beforeCreate Vue实例创建之前
- created Vue实例创建之后
- beforeMount DOM节点挂载之前
- mounted DOm节点挂载之后
- beforeUpdate 数据更新之前
- updated 数据更新之后
- beforeDestory Vue实例销毁之前
- destoryed Vue实例销毁之后
加载渲染过程：
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子breforeMount->子mounted->父mounted
子组件更新过程：
父beforeUpdate->子beforeUpdate->子updated->父updated
父组件更新过程：
父beforeUpdate->父updated
销毁过程：
父beforeDestory->子beforeDestory->子destoryed->父destoryed
|