源码:/node_modules/vue/dist/vue.common.dev.js
本文用于理解vue2 computed和watch的源码,个人粗浅的理解,如有错误可以自行查看源码↑
Compued
- 在初始化函数
initState()中,判断新创建的vm中是否有computed,如果有,则传递vm以及computed给initComputed()函数
- 在函数
initComputed()中,判断是否处于SSR服务端渲染环境,如果不是,则给Computed的各个key值创建watcher类对象,进行监听(noop是空的函数) const computedWatcherOptions = { lazy: true };懒惰求值,依赖数据被访问的时候才会进行计算,将传给watcher的dirty值- 如果没有在
vm另外定义computed里的key属性,则需要defineComputed()来定义
defineComputed()函数将computed的key值,定义到vm上- 判断是否为函数
- 判断是否应该缓存,如果缓存,则调用
createComputedGetter,否则调用createGetterInvoker
createComputedGetter函数:- 如果存在当前
key值的watcher,则执行以下函数 - 如果
dirty为true,第一次执行且没有修改,执行evaluate,通过get拿到watcher的值,如果是第二次执行且没有修改update,则直接使用watcher.value(核心是dirty来判断是否缓存处理的) - 如果
Dep依赖中有target.onTrack则给Dep.target.onTrack相应地赋值
watch
- 在初始化函数
initState()中,判断新创建的vm中是否有watch,如果有,则传递vm以及watch给initWatch()函数
- 判断
watch编写的方式:数组还是对象还是函数
- 执行vm.$watch
immediate判断是否马上执行
-如果定义了deep则通过 traverse将属性递归绑定到dep