vue总结

vue响应式原理流程：

Vue 通过 defineProperty 完成了 Data 中所有数据的代理，当数据触发 get 查询时(也就是在执行render时候)，会将当前的 Watcher 对象加入到依赖收集池 Dep 中，当数据 Data 变化时，会触发 set 通知所有使用到这个 Data 的 Watcher 对象去 update 视图;

vue异步更新:

Vue 在发生数据变更时候，会触发 set 通知所有使用到这个 Data 的 Watcher 对象去 update, 然而这个update并不会直接进行更新，而是把需要更新的 Watcher 加入到 Queue 队列里，然后调用nextTick来批量执行Queue里面的watcher进行更新。

nextTick实现：

本质就是 nextTick 通过 Promise 、SetTimeout 等方法模拟的异步任务。

将传入nextTick的回调存入一个队列里面，然后开启一个异步函数，在异步函数里面调用cb队列。这个异步函数是根据浏览器兼容性创建的，一次看支持promise、MutationObserver和settimeout来实现。

vue 生命周期主要工作：

ustbhuangyi.github.io/vue-analysi…

1. beforeCreate和created:

beforeCreate 和 created 函数都是在实例化 Vue 的阶段, 调用是在 initState 的前后，initState 的作用是初始化 props、data、methods、watch、computed 等属性，之后我们会详细分析。那么显然 beforeCreate 的钩子函数中就不能获取到 props、data 中定义的值，也不能调用 methods 中定义的函数。

2. beforeMount & mounted:

在执行 vm._render() 函数渲染 VNode 之前，执行了 beforeMount 钩子函数,然后会new一个Watcher,new的时候，调用了render函数，进行了依赖收集，然后执行了vm._update()，把 VNode patch 到真实 DOM 后，执行 mounted 钩子.

3. beforeUpdate & updated:

当数据发生变更，触发set，通知所有使用到这个Data 的Watcher对象去update，Wathcer里面会去执行这个beforeUpdate钩子，然后是异步更新,之后执行updated钩子.

4. beforeDestroy & destroyed:

beforeDestroy 是在 $destroy 函数(也就是销毁第一步执行）执行最开始的地方。接着执行了一系列的销毁动作，包括从 parent 的$children 中删掉自身，删除 watcher，当前渲染的 VNode 执行销毁钩子函数等，执行完毕后再调用 destroyed 钩子函数。在 $destroy 的执行过程中，它又会执行 vm.patch(vm._vnode, null) 触发它子组件的销毁钩子函数，这样一层层的递归调用，所以 destroy 钩子函数执行顺序是先子后父，和 mounted 过程一样。