参考《深入浅出vue.js》作者：博文

1. 变化侦测理解

Vue.js 会自动通过状态生成DOM，并将其输出到页面上显示出来，这个过程叫渲染
变化侦测的作用是侦测数据的变化。当数据变化时，会通知视图进行相应的更新
- 变化侦测的两种类型
  - 1.推(push)
    - Vue.js 的变化侦测属于推,当状态发生变化时，Vue.js 立刻就知道了，而且在一定程度上知道哪些状态变了。因此，它知道的信息更多，也就可以进行更细粒度的更新,
    - 所谓更细粒度的更新，就是说：假如有一个状态绑定着好多个依赖，每个依赖表示一个具体的DOM节点，那么当这个状态发生变化时，向这个状态的所有依赖发送通知，让它们进行DOM更新操作,因为粒度越细，每个状态所绑定的依赖就越多，依赖追踪在内存上的开销就会越大
    - 从Vue.js 2.0 开始，它引入了虚拟DOM，将粒度调整为中等粒度，即一个状态所绑定的依赖不再是具体的DOM 节点，而是一个组件。这样状态变化后，会通知到组件，组件内部再使用虚拟DOM 进行比对。这可以大大降低依赖数量，从而降低依赖追踪所消耗的内存
    - Vue.js 之所以能随意调整粒度，本质上还要归功于变化侦测。因为“推”类型的变化侦测可以随意调整粒度。
  - 2.拉(pull)
    1.当状态发生变化时，它不知道哪个状态变了，只知道状态有可能变了，然后会发送一个信号告诉框架，框架内部收到信号后，会进行一个暴力比对来找出哪些DOM 节点需要重新渲染。这在Angular 中是脏检查的流程，在React中使用的是虚拟DOM。

2.追踪变化

1.两种方法

1.`Object.defineProperty`

1.追踪变化

// data-监听对象，key-监听对象的key，val-监听对象的value
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;
    },
  });
}

2.收集依赖

先收集依赖，即把用到数据name 的地方收集起来，然后等属性发生变化时，把之前收集好的依赖循环触发一遍就好了

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

// 假设依赖是一个函数，保存在window.target 上这里我们新增了数组dep，用来存储被收集的依赖。然后在set 被触发时，循环dep 以触发收集到的依赖
function defineReactive(data, key, val) {
  let dep = []; // 新增
  Object.defineProperty(data, key, {
    enumerable: true,
    configurable: true,
    get: function () {
      dep.push(window.target); // 新增
      return val;
    },
    set: function (newVal) {
      if (val === newVal) {
        return;
      }
      // 新增
      for (let i = 0; i < dep.length; i++) {
        dep[i](newVal, val);
      }
      val = newVal;
    },
  });
}

依赖收集的代码封装成一个Dep 类，它专门帮助我们管理依赖

export default class Dep {
   constructor() {
     this.subs = [];
   }
   addSub(sub) {
     this.subs.push(sub);
   }
   removeSub(sub) {
     remove(this.subs, sub);
   }
   depend() {
     if (window.target) {
       this.addSub(window.target);
     }
   }
   notify() {
     const subs = this.subs.slice();
     for (let i = 0, l = subs.length; i < l; i++) {
       subs[i].update();
     }
   }
 }

 function remove(arr, item) {
   if (arr.length) {
     const index = arr.indexOf(item);
     if (index > -1) {
       return arr.splice(index, 1);
     }
   }
 }

改造后的defineReactive

 function defineReactive(data, key, val) {
   let dep = new Dep(); // 修改
   Object.defineProperty(data, key, {
     enumerable: true,
     configurable: true,
     get: function () {
       dep.depend(); // 修改
       return val;
     },
     set: function (newVal) {
       if (val === newVal) {
         return;
       }
       val = newVal;
       dep.notify(); // 新增
     },
   });
 }

3.依赖watcher

Watcher 是一个中介的角色，数据发生变化时通知它，然后它再通知其他地方

 export default class Watcher {
    constructor (vm, expOrFn, cb) {
     this.vm = vm
     // 执行this.getter()，就可以读取data.a.b.c 的内容
     this.getter = parsePath(expOrFn)
     this.cb = cb
     this.value = this.get()
     } 
     get() {
       window.target = this
       let value = this.getter.call(this.vm, this.vm)
       window.target = undefined
       return value
       }
     update () {
       const oldValue = this.value
       this.value = this.get()
       this.cb.call(this.vm, this.value, oldValue)
       }
     }

// parsePath.js
 /**
 * 解析简单路径
 */
 const bailRE = /[^\w.$]/
 export function parsePath (path) {
 if (bailRE.test(path)) {
  return
 }
 const segments = path.split('.')
 return function (obj) {
    for (let i = 0; i < segments.length; i++) {
    if (!obj) return
    obj = obj[segments[i]]
    }
    return obj
 }
 }

4.递归侦测所有key

/**
 * Observer 类会附加到每一个被侦测的object 上。
 * 一旦被附加上，Observer 会将object 的所有属性转换为getter/setter 的形式
 * 来收集属性的依赖，并且当属性发生变化时会通知这些依赖
 */
 export class Observer {
 constructor (value) {
 this.value = value
 if (!Array.isArray(value)) {
 this.walk(value)
 }
 }
 /**
 * walk 会将每一个属性都转换成getter/setter 的形式来侦测变化
 * 这个方法只有在数据类型为Object 时被调用
 */
 walk (obj) {
 const keys = Object.keys(obj)
 for (let i = 0; i < keys.length; i++) {
 defineReactive(obj, keys[i], obj[keys[i]])
 }
 }
 }
 function defineReactive (data, key, val) {
 // 新增，递归子属性
 if (typeof val === 'object') {
 new Observer(val)
 }
 let dep = new Dep()
 Object.defineProperty(data, key, {
 enumerable: true,
 configurable: true,
 get: function () {
 dep.depend()
 return val
 },
 set: function (newVal) {
 if(val === newVal){
 return
 }
 val = newVal
 dep.notify()
 }
 })
 }

Vue.js 通过Object.defineProperty 来将对象的key 转换成getter/setter 的形式来追踪变化，

但getter/setter 只能追踪一个数据是否被修改，无法追踪新增属性和删除属性

JavaScript 没有提供元编程的能力，无法侦测到一个新属性被添加到了对象中，也无法侦测到一个属性从对象中删除，为了解决这个问题， Vue.js 提供了两个API——vm.$set 与vm.$delete

5.总结

变化侦测就是侦测数据的变化。当数据发生变化时，要能侦测到并发出通知。

Object 可以通过Object.defineProperty 将属性转换成getter/setter 的形式来追踪变化。读取数据时会触发getter，修改数据时会触发setter。

我们需要在getter 中收集有哪些依赖使用了数据。当setter 被触发时，去通知getter 中收集的依赖数据发生了变化。

收集依赖需要为依赖找一个存储依赖的地方，为此我们创建了Dep，它用来收集依赖、删除依赖和向依赖发送消息等。

所谓的依赖，其实就是Watcher。只有Watcher 触发的getter 才会收集依赖，哪个Watcher触发了getter，就把哪个Watcher 收集到Dep 中。当数据发生变化时，会循环依赖列表，把所有的Watcher 都通知一遍。

Watcher 的原理是先把自己设置到全局唯一的指定位置（例如window.target），然后读取数据。因为读取了数据，所以会触发这个数据的getter。接着，在getter 中就会从全局唯一的那个位置读取当前正在读取数据的Watcher，并把这个Watcher 收集到Dep 中去。通过这样的方式，Watcher 可以主动去订阅任意一个数据的变化。

我们创建了Observer 类，它的作用是把一个object 中的所有数据（包括子数据）都转换成响应式的，也就是它会侦测object 中所有数据（包括子数据）的变化。

Data 通过Observer 转换成了getter/setter 的形式来追踪变化。

当外界通过Watcher 读取数据时，会触发getter 从而将Watcher 添加到依赖中。

当数据发生了变化时，会触发setter，从而向Dep 中的依赖（Watcher）发送通知。

Watcher 接收到通知后，会向外界发送通知，变化通知到外界后可能会触发视图更新，也有可能触发用户的某个回调函数等。

2.变化侦测

1. 变化侦测理解

2.追踪变化

1.两种方法

1.`Object.defineProperty`

1.追踪变化

2.收集依赖

3.依赖watcher

4.递归侦测所有key

5.总结

2.ES6 的`Proxy`。

2.变化侦测

1. 变化侦测理解

2.追踪变化

1.两种方法

1.Object.defineProperty

1.追踪变化

2.收集依赖

3.依赖watcher

4.递归侦测所有key

5.总结

2.ES6 的Proxy。

1.`Object.defineProperty`

2.ES6 的`Proxy`。