Vue深入响应式原理

如何追踪变化？

把一个js对象传递给Vue实例的data选项，Vue将遍历此对象的所有属性，并通过<pre><code>Object.defineProperty</code></pre>把这些属性转化为setter/getter。也就是在实例初始化的过程中，Vue的内部方法_proxy遍历data中属性的key，并通过<pre><code>Object.defineProperty</code></pre>把这些属性转化为setter/getter，将data中的属性代理到vm实例上。
用户看不到getter/setter,但是在内部Vue通过它们追踪依赖，在属性被访问和修改的时候通知变化。
每个组件实例都有相应的watcher实例对象，它在组件渲染过程中把属性记录为依赖。之后当依赖项的setter被调用时，会通知watcher重新计算，从而使它关联的组件得以跟新。

Vue.js源码解析：深入响应式原理

不在data上的属性，Vue是没有办法检测的.Vue不允许在已经创建的实例上动态添加根级响应式属性，但是可以通过<pre><code>Vue.set(object, key ,value)</code></pre>方法将响应属性添加到嵌套的对象上。也可以使用vm.$set实例方法，是全局Vue.set方法的别名。 <pre><code>this.$set(this.object, key, value)</code></pre>
例子：

var app1 = new Vue({ el:'#example', data:{ test:{ } } }); app1.$set(app1.test, 'b', 2); console.log(app1.test); //是一个Object，并且值是b:2

但是下面的写法不能得到期望效果：
app1.$set(app1.$data, 'b', 2); //undefined
因为不允许动态添加根级属性。
还可以使用Object.assign()扩展原对象的属性。
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

例子：

app1.$set(app1.test, 'b', 2); app1.test = Object.assign({}, app1.test, {'a':1, 'c':3}); console.log(app1.test); //Object的值有：a:1, b:2, c:3

知识扩展：

VUEAngular都实现了双向数据绑定，机制有不同。

angular的双向绑定是使用脏检查机制实现的。
实现机制如下：
对于有可能引起数据变化的事件进行封装，每次这些事件被触发时候，就对数据进行一遍检查，如果发现数据有所变化，就进行相应的更新回调。但是某个事件触发时候，需要检查哪个数据呢？我们并不知道这个事件有可能导致变化的对应数据，因此要粗暴的将所有数据进行完全检查。但是有时候某个数据改变了，并不止影响自己，也有可能会影响到其他数据。因此，如果一次完全检查视作一个检查周期，那我们至少要进行两个周期。第二个周期用来确认前一遍的数据变动中，是否引起了其他的数据变动。如果第二遍周期也有变动，那么就需要继续进行第三次检查周期，直到两次检查的数据完全一致则停止。（来自同学分享）

VUE数据劫持方式的核心是依赖与Object.defineProperty()。不得不说这是个了不起的方法，就是它支撑起了vue的双向绑定。
Object.defineProperty()可以利用getter和setter对对象的各个属性进行劫持，一旦set值，则数据变动，此时通知观察者，进行回调更新。
这种方式的核心组件有四点：

1. Observer :数据监听器，对接数据，能够对数据对象的所有属性进行监听，如果监听到数据有变动，可拿到最新值并通知订阅者
2. Compile:指令解析器，对接dom，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
3. Watcher:连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图。
4. MVVM:入口函数，整合以上三者

异步更新队列：

首先要了解什么是事件循环？
JavaScript 运行机制详解：再谈Event Loop 这篇文章写的很清晰。

可能你还没有注意到，Vue异步执行 DOM 更新。只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会一次推入到队列中。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际（已去重的）工作。Vue 在内部尝试对异步队列使用原生的Promise.then和MutationObserver，如果执行环境不支持，会采用setTimeout(fn, 0)代替。

例如，当你设置vm.someData = 'new value'，该组件不会立即重新渲染。当刷新队列时，组件会在事件循环队列清空时的下一个“tick”更新。多数情况我们不需要关心这个过程，但是如果你想在 DOM 状态更新后做点什么，这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们确实要这么做。为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用Vue.nextTick(callback)。这样回调函数在 DOM 更新完成后就会调用。例如：
{{message}} var vm =new Vue({ el:'#example', data: { message:'123' } }) vm.message ='new message'// 更改数据 vm.$el.textContent ==='new message'// false Vue.nextTick(function(){ vm.$el.textContent ==='new message'// true })