Open EdwardZZZ opened 7 years ago
在 Vue 3.0 里面,computed 和 watch 都是基于 effect 的包装,简单的 computed 的实现
const computed = (getter) => {
let value
let dirty = true
const runner = effect(getter, {
lazy: true,
scheduler() {
dirty = true // deps changed
}
})
return {
get value() {
if (dirty) {
value = runner() // re-evaluate
dirty = false
}
return value
}
}
}
computed 接受一个 getter 函数,这个函数我们把它直接传给 effect,effect会在先执行一次进行依赖收集,在收集完了之后,如果里面其中的依赖发生了变动,他就会触发这个 scheduler 将 dirty 设置为 true。在最后我们在对 computed 进行求值的时候,如果 dirty 为 true,我们就会重新进行一次运算得到新的 value 后再把 value 传出去。在第二次调用时,如果里面的依赖没有更新,我们就可以直接用上一次计算的结果,这件可以避免掉多余重复的计算。延伸阅读
https://github.com/vuejs/vue/blob/dev/src/core/instance/state.js#L170