【4-4】【附录】响应式原理 之 数据劫持之computed和watch的具体源码

《数据劫持之computed和watch的具体源码》：

这一篇是【附录】，比较细地记录computed和watch具体的执行过程。其实还是有利于理解依赖收集和派发更新具体是什么时候发生了，能和 mvvm “首次构建” 和 “重新渲染” 的流程结合起来看。

说是附录，其实如果掌握了其中一些核心的时间点，对于对vue的源码理解是有帮助的。

初始化阶段initState ==> initComputed / initWatch

initWatch
- ==> createWatcher ==> vm.$watch两层封装，兼容各种传入格式，上了typescript之后可能不同了
- 【本质】vm.$watch(expOrFn, handler, options)
- 【本质的本质】 new Watcher(vm, expOrFn, cb, { user: true })
  - this.getter = parsePath(expOrFn)
- 可选immediate
- 返回一个unwatcherFn ==> watcher.teardown
更多复杂的如deep watcher 和sync watcher的解释，可以基于此自行理解

----------- 初始化阶段 -------------------------

initComputed 【计算属性有被重构优化过，具体流程没认真看】
- new Watcher()， 用户定义的函数作为getter
  - (isRenderWatcher为false，配置构造函数的options为computed:true)
  - (注意vm已经挂载了计算属性了：在执行Vue.extend的时候已经 defineComputed$1 在该组件对象的原型对象上。这个主要是想利用原型链机制共享数据，减少重复创建，多组件实例间共享)
  - (watcher getter和 computed的getter一致，前者是为了以后求值用的)
  - vm._watchers.push(this);
  - 并没有this.get()，而是 new Dep()
- defineComputed
  - Object.defineProperty getter 【回头执行，又 createComputedGetter 返回】
----------------- 在渲染等时机，创建vnode需要获取该计算属性 -----------------
获取该计算属性的时候，就会触发它的getter。在 createComputedGetter中定义的
- watcher.depend(); return watcher.evaluate()
  - watcher.depend()，把渲染watcher放到this.dep.subs中。依赖收集：相当于渲染 watcher 等等订阅了这个 computed watcher 的变化
  - watcher.evaluate === 根据dirty来调用this.get()，并返回该计算属性值 (判断 this.dirty，如果为 true 则通过 this.get() 求值，然后把 this.dirty 设置为 false)
    - 执行用户定义的getter，该computed里面所依赖的data(比如此例中的this.useless) 的getter也会触发
      - 依赖收集，把该computed的watcher加入到对应 data的依赖订阅数组里面
  - (当computed所依赖的data变化的时候，才会重新计算)
----------(首次构建，页面渲染出来了)----------
----------当computed所依赖的data数据变化，比如click事件回调处理中，让所依赖的data如this.useless++-------------
拿用户定义的computed函数重新生成一个computed，并且重新订阅所依赖的data。另外，如果computed计算结果前后不一样，就也派发更新视图更新updateComponent回调执行。此后渲染watcher也会重新依赖收集该computed。
- 调用dep.notify。也就是调用所有“订阅该计算属性的”的 subs[i].update()
  - 其中就包括通知依赖这个data的 computed的渲染watcher做update

az22c 博客

【4-4】【附录】响应式原理之数据劫持之computed和watch的具体源码