前言

Object 和 Array 的变化 侦测采用不同的处理方式。

什么是变化侦测

Vue.js 会自动通过状态生成 DOM，并将其输出到页面上显示出来，这个过程叫渲染。Vue.js 的渲染过程是声明式的，我们通过模板来描述状态与 DOM 之间的映射关系。通常，在运行时应用内部的状态会不断发生变化，此时需要不停地重新渲染这时如何确定状态中发生了什么变化？

变化侦测就是用来解决这个问题的，它分为两种类型：一种是“推”（push），另一种是“拉”（pull）。Angular和React的变化侦测属于哪种？用什么实现？

那么vue的变化侦测是怎么样的呢？

vue是'推'，粒度最细，代价是什么？

如何追踪变化

在js里怎么侦测一个对象的变化？ES6有什么新的方法？

手写 Object.defineProperty（手写双向数据绑定）

function defineReactive(data, key, val) {
  Object.defineProperty(data, key, {
    enumerable: true,
    configurable: true,
    get: function () {
      return val;
    },
    set: function (newVal) {
      if (val === newVal) {
        return;
      }
      val = newVal;
    },
  });
}

为什么要设置 enumerable: true,configurable: true？

Object.defineProperty如何收集依赖

在getter中收集依赖，在setter中触发依赖。

Object.defineProperty依赖收集在哪里

依赖是谁

watcher！

什么是watcher

太抽象了这块