1️⃣ 如何追踪变化

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 [Object.defineProperty](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty) 把这些 property 全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。
这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在 property 被访问和修改时通知变更。这里需要注意的是不同浏览器在控制台打印数据对象时对 getter/setter 的格式化并不同，所以建议安装 vue-devtools 来获取对检查数据更加友好的用户界面。
每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。
image.png

1️⃣ 检测变化的注意事项

由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。尽管如此我们还是有一些办法来回避这些限制并保证它们的响应性。

2️⃣ 对于对象

Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。例如：

  1. var vm = new Vue({
  2.   data:{
  3.     a:1
  4.   }
  5. })
  6. vm.b = 2
  8. // a 是响应式的, 因为 a 在创建之初就是存在的
  9. // b 不是响应式的, 因为 b 是创建之后添加的
  10. // vue 无法检测到对象的添加或删除所以必须在 data 对象上存在才能让 Vue 将它转换为响应式的

对于已经创建的实例，Vue 不允许动态添加根级别的响应式 property。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式 property。例如，对于：
image.png
您还可以使用 vm.$set() 实例方法，这也是全局 Vue.set 方法的别名：
image.png
有时你可能需要为已有对象赋值多个新 property，比如使用 Object.assign() 或 _.extend()。但是，这样添加到对象上的新 property 不会触发更新。在这种情况下，你应该用原对象与要混合进去的对象的 property 一起创建一个新的对象。
image.png

2️⃣ 对于数组

Vue 不能检测以下数组的变动：
当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength
举个例子：

  1. var vm = new Vue({
  2.   data: {
  3.     items: ['a', 'b', 'c']
  4.   }
  5. })
  6. vm.items[1] = 'x' // 不是响应性的
  7. vm.items.length = 2 // 不是响应性的

为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将在响应式系统内触发状态更新：

  1. // Vue.set
  2. Vue.set(vm.items, indexOfItem, newValue)
  1. // Array.prototype.splice
  2. vm.items.splice(indexOfItem, 1, newValue)

你也可以使用 vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名：

  1. vm.$set(vm.items, indexOfItem, newValue)

为了解决第二类问题，你可以使用 splice：

  1. vm.items.splice(newLength)

1️⃣ 声明响应式 property

由于 Vue 不允许动态添加根级响应式 property，所以你必须在初始化实例前声明所有根级响应式 property，哪怕只是一个空值：

  1. var vm = new Vue({
  2.   data: {
  3.     // 声明 message 为一个空值字符串
  4.     message: ''
  5.   },
  6.   template: '<div>{{ message }}</div>'
  7. })
  8. // 之后设置 `message`
  9. vm.message = 'Hello!'

如果你未在 data 选项中声明 message，Vue 将警告你渲染函数正在试图访问不存在的 property。
这样的限制在背后是有其技术原因的，它消除了在依赖项跟踪系统中的一类边界情况，也使 Vue 实例能更好地配合类型检查系统工作。但与此同时在代码可维护性方面也有一点重要的考虑：data 对象就像组件状态的结构 (schema)。提前声明所有的响应式 property，可以让组件代码在未来修改或给其他开发人员阅读时更易于理解。

1️⃣ 异步更新队列

可能你还没有注意到，Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。
例如，当你设置 vm.someData = ‘new value’，该组件不会立即重新渲染。当刷新队列时，组件会在下一个事件循环“tick”中更新。多数情况我们不需要关心这个过程，但是如果你想基于更新后的 DOM 状态来做点什么，这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员使用“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们必须要这么做。为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback)。

2️⃣ vm.$nextTick & Vue.nextTick

利用 vm.$nextTick 或 Vue.nextTick，在页面重新渲染，DOM 更新后，会立刻执行 vm.$nextTick
vm.nextTick 和 Vue.nextTick 还可以作为 Promise 使用
vm.$nextTick 和 Vue.nextTick 的区别？

  1.   1. Vue.nextTick 内部函数的 this 指向 window
  2.   2. vm.$nextTick 内部函数的 this 指向 Vue 实例对象

image.png

2️⃣ 利用响应式更改数组

利用数组变异方法：push、pop、shift、unshift、splice、sort、reverse
利用vm.$set/Vue.set实例方法

  1.   1. 使用方法：Vue.set(object, propertyName, value)，也就是这个意思：Vue.set(要改谁，改它的什么，改成啥)

利用vm.$delete或Vue.delete删除数组中的某一项

  1.   1. 使用方法：Vue.delete(object, target)，也就是这个意思：Vue.delete(要删除谁的值，删除哪个)

2️⃣ 利用响应式更改对象

添加利用vm.$set/Vue.set实例方法
删除利用vm.$delete/Vue.delete方法

2️⃣ 总结

更改数组用变异方法，就够了
更改对象就用 vm.$set 和 vm.$delete

1️⃣ 剖析 Vue 响应式原理

响应式数据的最终目标，是当对象本身或对象属性发生变化时，将会运行一些函数，最常见的就是 render 函数。
在具体实现上，vue 用到了几个核心部件：

  1.   1. Observer
  2.   2. Dep
  3.   3. Watcher
  4.   4. Scheduler

2️⃣ Observer

Observer 要实现的目标非常简单，就是把一个普通的对象转换为响应式的对象
为了实现这一点，Observer 把对象的每个属性通过 Object.defineProperty 转换为带有 getter 和 setter 的属性，这样一来，当访问或设置属性时，vue 就有机会做一些别的事情。
image.png
Observer 是 vue 内部的构造器，我们可以通过Vue提供的静态方法Vue.observable( object )间接的使用该功能。
在组件生命周期中，这件事发生在beforeCreate之后，created之前。
具体实现上，它会递归遍历对象的所有属性，以完成深度的属性转换。
由于遍历时只能遍历到对象的当前属性，因此无法监测到将来动态增加或删除的属性，因此vue提供了$set和$delete两个实例方法，让开发者通过这两个实例方法对已有响应式对象添加或删除属性。
对于数组，vue会更改它的隐式原型，之所以这样做，是因为vue需要监听那些可能改变数组内容的方法
image.png
总之，Observer的目标，就是要让一个对象，它属性的读取、赋值，内部数组的变化都要能够被vue感知到。
这里有两个问题没解决，就是读取属性时要做什么事，而属性变化时要做什么事，这个问题需要依靠Dep来解决。

2️⃣ Dep

Dep的含义是 Dependency，表示依赖的意思。
Vue 会为响应式对象中的每个属性、对象本身、数组本身创建一个 Dep 实例，每个 Dep 实例都有能力做以下两件事：

  1.   1. 记录依赖：是谁在用我
  2.   2. 派发更新：我变了，我要通知那些用到我的人

当读取响应式对象的某个属性时，它会进行依赖收集：有人用到了我
当改变某个属性时，它会派发更新：那些用我的人听好了，我变了
响应式 - 图8

2️⃣ Watcher

这里又出现一个问题，就是 Dep 如何知道是谁在用我？
要解决这个问题，需要依靠另一个东西，就是 Watcher。
当某个函数执行的过程中，用到了响应式数据，响应式数据是无法知道是哪个函数在用自己的
因此，vue通过一种巧妙的办法来解决这个问题
我们不要直接执行函数，而是把函数交给一个叫做watcher的东西去执行，watcher是一个对象，每个这样的函数执行时都应该创建一个watcher，通过 watcher 去执行
watcher 会设置一个全局变量，让全局变量记录当前负责执行的 watcher 等于自己，然后再去执行函数，在函数的执行过程中，如果发生了依赖记录 dep.depend()，那么 Dep 就会把这个全局变量记录下来，表示：有一个 watcher 用到了我这个属性
当 Dep 进行派发更新时，它会通知之前记录的所有 watcher：我变了
响应式 - 图9
每一个vue 组件实例，都至少对应一个 watcher，该 watcher 中记录了该组件的 render 函数。
watcher 首先会把 render 函数运行一次以收集依赖，于是那些在 render 中用到的响应式数据就会记录这个 watcher。
当数据变化时，dep 就会通知该 watcher，而 watcher 将重新运行 render 函数，从而让界面重新渲染同时重新记录当前的依赖。

2️⃣ Scheduler

现在还剩下最后一个问题，就是Dep通知watcher之后，如果watcher执行重运行对应的函数，就有可能导致函数频繁运行，从而导致效率低下
试想，如果一个交给watcher的函数，它里面用到了属性a、b、c、d，那么a、b、c、d属性都会记录依赖，于是下面的代码将触发4次更新：

  1. state.a = "new data";
  2. state.b = "new data";
  3. state.c = "new data";
  4. state.d = "new data";

这样显然是不合适的，因此，watcher收到派发更新的通知后，实际上不是立即执行对应函数，而是把自己交给一个叫调度器的东西
调度器维护一个执行队列，该队列同一个watcher仅会存在一次，队列中的watcher不是立即执行，它会通过一个叫做nextTick的工具方法，把这些需要执行的watcher放入到事件循环的微队列中，nextTick的具体做法是通过Promise完成的

nextTick 通过 this.$nextTick 暴露给开发者 nextTick 的具体处理方式见：https://cn.vuejs.org/v2/guide/reactivity.html#异步更新队列

也就是说，当响应式数据变化时，render函数的执行是异步的，并且在微队列中

2️⃣ 总体流程

image.png