vuejs 的 computed实现源码分析

在 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 传出去。在第二次调用时，如果里面的依赖没有更新，我们就可以直接用上一次计算的结果，这件可以避免掉多余重复的计算。延伸阅读

EdwardZZZ / articles

vuejs 的 computed实现源码分析 #11