深入响应式原理

前言

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) // => '已更新'
  }
}

什么是响应式

我们先来看个例子：


  Price :￥{{ price }}
  Total:￥{{ price * quantity }}
  Taxes: ￥{{ totalPriceWithTax }}

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中数据呢，是怎样实现响应式的