Computed

   // 计算属性
    function computed(getter) {
      let value
      let dirty = true
      // 把getter作为副作用函数,创建一个lazy的effect
      const effectFn = effect(getter, {
        lazy: true,
        scheduler: () => {
          dirty = true
          // 当计算属性依赖发生变化时,手动调用trigger函数触发响应
          console.log(obj);
          trigger(obj, 'value')
        }
      })
      const obj = {
        // 当读取value时才执行effectFn
        get value() {
          if (dirty) {
            value = effectFn();
            dirty = false
          }

          // 当读取value时,手动调用 track 函数进行追踪
          track(obj, 'value')
          return value
        }
      }
      return obj
    }
// 分析问题的原因, 我们发现, 从本质上看这就是一个典型的effect嵌套。 一个计算属性内部拥有自己的effect, 并且它是懒执行的,
// 只有当真正读取计算属性的值时才会执行。 对于计算属性的getter函数来说。 它里面访问的响应式数据只会把computed内部的effect收集为依赖。
//  而当把计算属性用于另外一个 effect 时, 就会发生 effect 嵌套, 外层的 effect 不会被内层effest 中的响应式数据收集。
// 解决办法很简单。 当读取计算属性的值时, 我们可以手动调用track函数进行追踪; 当计算属性依赖的响应式数据发生变化时, 我们可以手动调用trigger函数触发响应:

Last updated