前言
Vue最独特的特性之一，是其非侵入型的响应式系统。数据模型仅仅是普通的JavaScript对象(虚拟DOM)。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接，不过理解其工作原理同样重要，这样你可以避开一些常见的问题。
如何追踪变化
Vue实例中的data函数会返回一个对象，Vue会遍历此对象所有的属性，并使用Object.defineProperty把这些属性全部转为getter/setter。这些getter/setter对用户来说是不可见的，但是在内部它们让Vue能够追踪依赖，在属性被访问和修改时通知变更。
每个组件实例都对应一个watcher实例，它会在组件渲染的过程中把接触过的数据属性记录为依赖。之后当依赖项的setter触发时，会通知watcher，从而使它关联的组件重新渲染。
image.png
检测变化的注意事项
受现代JavaScript的限制，Vue无法检测到对象属性的添加或删除。由于Vue会在初始化实例时对属性执行getter/setter转化，所以属性必须在data对象上存在才能让Vue将它转换为响应式的。
有时你可能为已有对象赋值多个新属性，比如使用Object.assign()或_.extend()。但是这样添加到对象上的新属性不会触发页面更新。在这种情况下，你应该用原对象与要混合进去的对象的属性一起创建一个新的对象。
Object.assign(this.someObject, { a: 1, b: 2 }) // 在原有对象添加属性，不会触发
this.someObject = Object.assign( {}, this.someObject, { a: 1, b: 2 } ) // 对象重新赋值可以触发
异步更新队列
Vue在更新DOM时是异步执行的。只要侦听到数据变化，Vue将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个watcher被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和DOM操作是非常重要的。然后在下一个事件循环'tick'中，Vue刷新队列并执行实际(已去重的)工作。Vue在内部对异步队列尝试使用原生的Promise.then、MutationObserver和setImmediate，如果执行环境不支持，则会采用setImmediate(fn, 0)代替。
例如当你设置vm.someData = 'new value'，该组件不会立即重新渲染。当刷新队列时，组件 会在下一个 事件循环'tick'中更新。多数情况我们不需要关心这个过程，但是如果你想基于更新后的DOM状态来做点什么，可以使用Vue.nextTick(callback)。因为$nextTick()返回一个Promise对象，所以你可以使用es6语法完成相同的事情：
methods: {
async updateMessage () {
this.message = '已更新'
console.log(this.$el.textContent) // => '未更新'
await this.$nextTick()
console.log(this.$el.textContent) // => '已更新'
}
}
什么是响应式
我们先来看个例子：
<div id="app">
<div>Price :￥{{ price }}</div>
<div>Total:￥{{ price * quantity }}</div>
<div>Taxes: ￥{{ totalPriceWithTax }}</div>
<button @click="changePrice">改变价格</button>
</div>
var app = new Vue({
el: '#app',
data() {
return {
price: 5.0,
quantity: 2
};
},
computed: {
totalPriceWithTax() {
return this.price * this.quantity * 1.03;
}
},
methods: {
changePrice() {
this.price = 10;
}
}
})
上例中当price发生变化的时候，Vue就知道自己需要做三件事情：
- 更新页面上price
- 计算表达式price * quantity的值，更新页面
- 调用totalPriceWithTax函数，更新页面
数据发生变化后，会重新对页面渲染，这就是Vue响应式，那么这一切是怎么做到的呢？
想要完成这个过程，我们需要：
- 侦测数据的变化
- 收集视图依赖了哪些数据
- 数据变化时，自动通知需要更新的视图部分，并进行更新
对应专业俗语分别是：
- 数据劫持/数据代理
- 依赖收集
- 发布订阅模式
如何侦测数据的变化
首先有个问题，在JavaScript中，如何侦测一个对象的变化？
其实有两种方法可以侦测到变化：使用Object.defineProperty和ES6的Proxy，这就是进行数据劫持和数据代理。
方法1.Object.defineProperty实现
Vue通过设定对象属性的setter/getter方法来监听数据的变化，通过getter进行依赖收集，而每个setter方法就是一个观察者，在数据变更的时候通知订阅者更新视图。
疑问：
data中数据是响应式的，那么props中还有computed中数据呢，是怎样实现响应式的
网友评论