源码解析vue2的computed和watch

100 阅读1分钟

源码:/node_modules/vue/dist/vue.common.dev.js

本文用于理解vue2 computed和watch的源码,个人粗浅的理解,如有错误可以自行查看源码↑

Compued

image.png

  • 在初始化函数initState()中,判断新创建的vm中是否有computed,如果有,则传递vm以及computedinitComputed()函数

image.png

  • 在函数initComputed()中,判断是否处于SSR服务端渲染环境,如果不是,则给Computed的各个key值创建watcher类对象,进行监听(noop是空的函数)
  • const computedWatcherOptions = { lazy: true };懒惰求值,依赖数据被访问的时候才会进行计算,将传给watcherdirty
  • 如果没有在vm另外定义computed里的key属性,则需要defineComputed()来定义

image.png

  • defineComputed()函数将computedkey值,定义到vm
  • 判断是否为函数
  • 判断是否应该缓存,如果缓存,则调用createComputedGetter,否则调用createGetterInvoker

image.png

  • createComputedGetter函数:
  • 如果存在当前key值的watcher,则执行以下函数
  • 如果dirty为true,第一次执行且没有修改,执行evaluate,通过get拿到watcher的值,如果是第二次执行且没有修改update,则直接使用watcher.value(核心是dirty来判断是否缓存处理的)
  • 如果Dep依赖中有target.onTrack则给Dep.target.onTrack相应地赋值

watch

image.png

  • 在初始化函数initState()中,判断新创建的vm中是否有watch,如果有,则传递vm以及watchinitWatch()函数

image.png

  • 判断watch编写的方式:数组还是对象还是函数

image.png

  • 执行vm.$watch

image.png

  • immediate判断是否马上执行

image.png

-如果定义了deep则通过 traverse将属性递归绑定到dep