Vue的双向绑定主要做了2件事

  1. 数据劫持
  2. 添加观察者


数据劫持（proxy）+依赖收集（观察者模式：watcher、Dep）

数据劫持

Object.defineProperty

  1. Object.defineProperty(obj, key, {
  2.   enumerable: true,
  3.   configurable: true,
  4.   # 这里无非就是劫持了对象的get和set方法。在所代理的属性的get方法中，
  5.   # 当dep.Target存在的时候会调用 dep.depend()，
  6.   get: function reactiveGetter () {
  7.     const value = getter ? getter.call(obj) : val
  8.     if (Dep.target) {
  9.       dep.depend()
  10.       if (childOb) {
  11.         childOb.dep.depend()
  12.       }
  13.       if (Array.isArray(value)) {
  14.         dependArray(value)
  15.       }
  16.     }
  17.     return value
  18.   },
  19.   set: function reactiveSetter (newVal) {
  20.     const value = getter ? getter.call(obj) : val
  21.     if (newVal === value || (newVal !== newVal && value !== value)) {
  22.       return
  23.     }
  24.     if (setter) {
  25.       setter.call(obj, newVal)
  26.     } else {
  27.       val = newVal
  28.     }
  30.     childOb = !shallow && observe(newVal)
  31.     dep.notify()
  32.   }
  33. })

proxy

  1. // 最新版可以通过 Proxy 实现
  2. Proxy(data, {
  3.   get(target, key) {
  4.     return target[key];
  5.   },
  6.   set(target, key, value) {
  7.     let val = Reflect.set(target, key, value);
  8.       _that.$dep[key].forEach(item => item.update());
  9.     return val;
  10.   }
  11. })

观察者模式

btw：观察者模式 vs 发布订阅
eventemitter属于？

  1. // 订阅者：数据变更的消费者
  2. class Dep {
  3.   constructor() {
  4.     this.subs = []
  5.   }
  7.   addSub(sub) {
  8.     this.subs.push(sub)
  9.   }
  11.   depend() {
  12.     if (Dep.target) { 
  13.       Dep.target.addDep(this);
  14.     }
  15.   }
  17.   notify() {
  18.     this.subs.forEach(sub => sub.update())
  19.   }
  20. }
  1. // 被观察者：数据变更了通知下游消费者
  2. class Watcher {
  3.   constructor(vm, expOrFn) {
  4.     this.vm = vm;
  5.     this.getter = expOrFn;
  6.     this.value;
  7.   }
  9.   get() {
  10.     Dep.target = this;
  12.     var vm = this.vm;
  13.     var value = this.getter.call(vm, vm);
  14.     return value;
  15.   }
  17.   evaluate() {
  18.     this.value = this.get();
  19.   }
  21.   addDep(dep) {
  22.     dep.addSub(this);
  23.   }
  25.   update() {
  26.     console.log('更新, value:', this.value)
  27.   }
  28. }
  1.  // 观察者实例
  2. var dep = new Dep();
  4. //  被观察者实例
  5. var watcher = new Watcher({x: 1}, (val) => val);
  6. watcher.evaluate();
  8. // 观察者监听被观察对象
  9. dep.depend()
  11. dep.notify()
  1. 通过 watcher.evaluate() 将自身实例赋值给 Dep.target
  2. 调用 dep.depend() 将dep实例将 watcher 实例 push 到 dep.subs中
  3. 通过数据劫持，在调用被劫持的对象的 set 方法时，调用 dep.subs 中所有的 watcher.update()