【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
文章目录