前言

Vue官方文档原话：Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。

类似于之前探讨过的海量表结构设计，响应式已推（push）的形式运作，而非响应式的编程思路以拉（pull）的方式运作。

传统不借助框架的onclick、addeventlistener等也是属于响应式的范畴，不能把它和双向绑定的概念弄混淆。

如何追踪变化

以vue举例。vue在初始化的过程中会把预设的data进行封装，当value进行变化时会自动去更新其模板。

当你把一个普通的 JavaScript 对象传给 Vue 实例的data选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因。

开发时看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。这里需要注意的问题是浏览器控制台在打印数据对象时 getter/setter 的格式化并不同，所以你可能需要安装vue-devtools来获取更加友好的检查接口。

每个组件实例都有相应的watcher实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。

检测变化的注意事项

受现代 JavaScript 的限制 (以及废弃Object.observe)，Vue不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行getter/setter转化过程，所以属性必须在data对象上存在才能让 Vue 转换它，这样才能让它是响应的。

Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)。然而它可以使用Vue.set(object, key, value)方法将响应属性添加到嵌套的对象上。（也可以使用vm.$set实例方法，这是全局Vue.set方法的别名）

有时你想向已有对象上添加一些属性，例如使用Object.assign()或_.extend()方法来添加属性。但是，添加到对象上的新属性不会触发更新。在这种情况下可以创建一个新的对象，让它包含原对象的属性和新的属性：

// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })
this.someObject = Object.assign({},this.someObject, {a:1,b:2})

声明响应式属性

由于 Vue 不允许动态添加根级响应式属性，所以你必须在初始化实例前声明根级响应式属性，哪怕只是一个空值。否则Vue 将警告你渲染函数在试图访问的属性不存在。

这样的限制在背后是有其技术原因的，它消除了在依赖项跟踪系统中的一类边界情况，也使 Vue 实例在类型检查系统的帮助下运行的更高效。而且在代码可维护性方面也有一点重要的考虑：data对象就像组件状态的概要，提前声明所有的响应式属性，可以让组件代码在以后重新阅读或其他开发人员阅读时更易于被理解。

异步更新队列

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

例如，当你设置vm.someData = 'new value'，该组件不会立即重新渲染。当刷新队列时，组件会在事件循环队列清空时的下一个“tick”更新。

多数情况我们不需要关心这个过程，但是如果你想在 DOM 状态更新后做点什么，这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们确实要这么做。为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用Vue.nextTick(callback)。这样回调函数在 DOM 更新完成后就会调用。在组件内使用vm.$nextTick()实例方法特别方便，因为它不需要全局Vue，并且回调函数中的this将自动绑定到当前的 Vue 实例上。

vue组件re-render过程

在对待数据绑定上，Vue与React通过改变setter/getter，而angular依靠digest脏检测，给每个变量设置一个监视器（watcher），在每一轮JS执行后会自动调用每个scope的$digest方法。

React 团队坚信一个组件的正确用途是 "separate concerns"，而不是前端模板或者展示逻辑。我们认为前端模板和组件代码是紧密相连的。另外，模板语言经常让展示的逻辑变得更复杂。Facebook 可能是在强调组件应该从功能上去抽象定义，而不仅仅从视觉上区分。

vue基本实现原理

在熟悉了Object.defineProperty和发布订阅者模式之后。我们不难实现一个简单的雏形。

// 封装vue对象
Object.defineProperty(obj, key, {
  get() {
    // 若当前有对该属性的依赖项，则将其加入到发布者的订阅者队列里
    if (Dep.target) {
      dep.addSub(Dep.target);
    }
    return val;
  },
  set(newVal) {
    if (val === newVal) {
      return;
    }
    // 若值发生改变，则通知依赖项同步更新。
    val = newVal;
    new Observer(newVal);
    dep.notify();
  }
})
// 基础的依赖项结构简单实现
class Dep {
  constructor() {
    // 用来存放watcher对象的数组
    this.subs = [];
  }
  addSub(sub) {
    // 添加订阅者
    if (this.subs.indexOf(sub) < 0) {
      this.subs.push(sub);
    }
  }
  notify() {
    // 通知订阅者更新
    this.subs.forEach((sub) => {
      sub.update();
    })
  }
}
// 观察者
class Watcher {
// …………
}

将依赖关系存在各自的dep中。当其中一个data发生变更时，会发起通知，通知依赖其的值重新进行计算进行update。虽然vue在不断更新，但是数据绑定更新的这个思路是不变的。

通过Proxy实现

Proxy 是 JavaScript 2015 的一个新特性。Proxy 的代理是针对整个对象的，而不是对象的某个属性，因此不同于 Object.defineProperty 的必须遍历对象每个属性，Proxy 只需要做一层代理就可以监听同级结构下的所有属性变化，当然对于深层结构，递归还是需要进行的。此外Proxy支持代理数组的变化。

function render() {
  console.log('模拟视图的更新')
}
let obj = {
  name: '前端工匠',
  age: { age: 100 },
  arr: [1, 2, 3]
}
let handler = {
  get(target, key) {
    // 如果取的值是对象就在对这个对象进行数据劫持
    if (typeof target[key] == 'object' && target[key] !== null) {
      return new Proxy(target[key], handler)
    }
    return Reflect.get(target, key)
  },
  set(target, key, value) {
    if (key === 'length') return true
    render()
    return Reflect.set(target, key, value)
  }
}

let proxy = new Proxy(obj, handler)
proxy.age.name = '我的名字' // 支持新增属性
console.log(proxy.age.name) // 模拟视图的更新 我的名字
proxy.arr[0] = '我的名字' //支持数组的内容发生变化
console.log(proxy.arr) // 模拟视图的更新 ['我的名字', 2, 3 ]
proxy.arr.length-- // 无效

以上代码不仅精简，而且还是实现一套代码对对象和数组的侦测都适用。不过Proxy兼容性不太好！

注：Reflect 是一个内置的对象，它提供拦截 JavaScript 操作的方法。这些方法与处理器对象的方法相同。Reflect不是一个函数对象，因此它是不可构造的。

心得总结

这张图也能清晰的反应数据传递的一个流程。

• 在 new Vue() 后， Vue 会调用_init 函数进行初始化，也就是init 过程。在 这个过程Data通过Observer转换成了getter/setter的形式，来对数据追踪变化，当被设置的对象被读取的时候会执行getter 函数，而在当被赋值的时候会执行setter函数。
• 当render function 执行的时候，因为会读取所需对象的值，所以会触发getter函数从而将Watcher添加到依赖中进行依赖收集。
• 在修改对象的值的时候，会触发对应的setter， setter通知之前依赖收集得到的 Dep 中的每一个 Watcher，告诉它们自己的值改变了，需要重新渲染视图。这时候这些 Watcher就会开始调用 update 来更新视图。

P.S. Dep作为存储依赖收集是个很关键的点，抽空可以研究下vue的优雅写法。

参考

Vue Vs React
vue.js响应式原理解析与实现
深入浅出Vue响应式原理（完整版）
youzan前端响应式思考