首先理解 vue 三个外围类

• observer：给对象的属性增加 getter 和 setter，用于依赖收集和派发更新；
• Dep：用于收集响应式对象发的依赖关系，每个响应式对象都有一个 dep 实例，dep.subs=watcher[]. 当数据产生扭转时候，会通过 dep.notify(), 告诉各个 watcher；

• watcher：观察者对象，render，watcher，computer watcher，user watcher；

  依赖收集：

  （1）initstate，对 Computed 属性初始化时，会触发 computed watcher, 依赖关系收集；

  （2）initState，对监听属性初始化的时候，触发的 User watcher 依赖关系收集；

  （3）render，触发 render watcher 依赖关系收集

  派发更新：

  object.defineProperty

  （1）组件中响应式的数据进行批改，会触发 setter 逻辑

  （2）dep.notify()

  （3）遍历所有的 subs，调用每一个 watcher 的 update 办法

  总结：

  当创立 vue 实例时，vue 会遍历 data 里的属性，object.defineproperty 为属性增加 getter 和 setter 对数据的读取进行劫持。

  ​

  观察者 - 订阅者（数据劫持）：vueObserver 数据监听器，把一个一般的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并应用 Object.defineProperty()办法把这些属性全副转成 setter、getter 办法。当 data 中的某个属性被拜访时，则会调用 getter 办法，当 data 中的属性被扭转时，则会调用 setter 办法。Compile 指令解析器，它的作用对每个元素节点的指令进行解析，替换模板数据，并绑定对应的更新函数，初始化相应的订阅。Watcher 订阅者，作为连贯 Observer 和 Compile 的桥梁，可能订阅并收到每个属性变动的告诉，执行指令绑定的相应回调函数。Dep 音讯订阅器，外部保护了一个数组，用来收集订阅者（Watcher），数据变动触发 notify 函数，再调用订阅者的 update 办法。执行流程如下：

  作者：web_afei
  链接：https://www.jianshu.com/p/eb7…
  起源：简书
  著作权归作者所有。商业转载请分割作者取得受权，非商业转载请注明出处。