【vue3源码】四、computed源码解析

参考代码版本：vue 3.2.37

官方文档：https://vuejs.org/

计算属性。接受一个getter函数，并根据getter函数的返回值返回一个不可变的响应式ref对象。或者，接受一个具有get和set函数的对象，用来创建可写的ref对象。
文件位置：packages/reactivity/src/computed.ts

使用示例

只读的计算属性：

const count = ref(1)
const doubleCount = computed(() => count.value * 2)

console.log(doubleCount.value) // 2

count.value = 2
console.log(doubleCount.value) // 3

可写的计算属性：

const count = ref(1)
const plusOne = computed({
  get: () => count.value + 1,
  set: (val) => {
    count.value = val - 1
  }
})

console.log(plusOne.value) // 2

plusOne.value = 1
console.log(count.value) // 0

进行调试：

const count = ref(1)
const doubleCount = computed(() => count.value * 2, {
  onTrack(e) {
    console.log('track')
    console.log(e)
  },
  onTrigger(e) {
    console.log('trigger')
    console.log(e)
  }
})

// 触发track监听
console.log(doubleCount.value)

// 触发trigger监听
count.value++

源码

export function computed<T>(
  getterOrOptions: ComputedGetter<T> | WritableComputedOptions<T>,
  debugOptions?: DebuggerOptions,
  isSSR = false
) {
  let getter: ComputedGetter<T>
  let setter: ComputedSetter<T>

  const onlyGetter = isFunction(getterOrOptions)
  if (onlyGetter) {
    getter = getterOrOptions
    setter = __DEV__
      ? () => {
          console.warn('Write operation failed: computed value is readonly')
        }
      : NOOP
  } else {
    getter = getterOrOptions.get
    setter = getterOrOptions.set
  }

  const cRef = new ComputedRefImpl(getter, setter, onlyGetter || !setter, isSSR)

  if (__DEV__ && debugOptions && !isSSR) {
    cRef.effect.onTrack = debugOptions.onTrack
    cRef.effect.onTrigger = debugOptions.onTrigger
  }

  return cRef as any
}

computed接收两个参数，第二参数是依赖收集和触发依赖的钩子函数，只在开发环境中起作用，这里就不做解释了。主要看第一个参数，观察其类型，发现可以传两种参数：一种是一个getter函数，一种是个包含get、set的对象。

首先从getterOrOptions中确定getter、setter（如果getterOrOptions是个function，说明computed是不可写的，所以会将setter设置为一个空函数），确定好之后，创建一个ComputedRefImpl实例，并将其返回。

ComputedRefImpl

export class ComputedRefImpl<T> {
  public dep?: Dep = undefined
  // 缓存的值
  private _value!: T
  // 在构造器中创建的ReactiveEffect实例
  public readonly effect: ReactiveEffect<T>

  // 标记为一个ref类型
  public readonly __v_isRef = true
  // 只读标识
  public readonly [ReactiveFlags.IS_READONLY]: boolean

  // 是否为脏数据，如果是脏数据需要重新计算
  public _dirty = true
  // 是否可缓存，取决于SSR
  public _cacheable: boolean

  constructor(
    getter: ComputedGetter<T>,
    private readonly _setter: ComputedSetter<T>,
    isReadonly: boolean,
    isSSR: boolean
  ) {
    this.effect = new ReactiveEffect(getter, () => {
      if (!this._dirty) {
        this._dirty = true
        triggerRefValue(this)
      }
    })
    this.effect.computed = this
    this.effect.active = this._cacheable = !isSSR
    this[ReactiveFlags.IS_READONLY] = isReadonly
  }

  get value() {
    // computed可能被其他proxy包裹，如readonly(computed(() => foo.bar))，所以要获取this的原始对象
    const self = toRaw(this)
    // 收集依赖
    trackRefValue(self)
    // 如果是脏数据或者是SSR，需要重新计算
    if (self._dirty || !self._cacheable) {
      // _dirty取false，防止依赖不变重复计算
      self._dirty = false
      // 计算
      self._value = self.effect.run()!
    }
    return self._value
  }

  set value(newValue: T) {
    this._setter(newValue)
  }
}

构造器

ComputedRefImpl构造器接收四个参数：getter、setter、isReadonly（是否只读）、isSSR（是否为SSR）。

constructor(
  getter: ComputedGetter<T>,
  private readonly _setter: ComputedSetter<T>,
  isReadonly: boolean,
  isSSR: boolean
) {
  this.effect = new ReactiveEffect(getter, () => {
    if (!this._dirty) {
      this._dirty = true
      triggerRefValue(this)
    }
  })
  // this.effect.computed指向this
  this.effect.computed = this
  // this.effect.active与this._cacheable在SSR中为false
  this.effect.active = this._cacheable = !isSSR
  this[ReactiveFlags.IS_READONLY] = isReadonly
}

在构造器中声明了一个ReactiveEffect，并将getter和一个调度函数作为参数传入，在调度器中如果_dirty为false，会将_dirty设置为true，并执行triggerRefValue函数。

triggerRefValue可以接受两个值：ref、newVal。

export function triggerRefValue(ref: RefBase<any>, newVal?: any) {
  ref = toRaw(ref)
  if (ref.dep) {
    if (__DEV__) {
      triggerEffects(ref.dep, {
        target: ref,
        type: TriggerOpTypes.SET,
        key: 'value',
        newValue: newVal
      })
    } else {
      triggerEffects(ref.dep)
    }
  }
}

triggerRefValue中首先获取ref的原始对象，如果ref的原始对象中有dep属性，则触发dep中的依赖。

在初始化effect之后，会将这个effect赋给ComputedRefImpl实例的effect属性，并将effect.computed指向ComputedRefImpl实例

value取值函数

get value() {
  // computed可能被其他proxy包裹，如readonly(computed(() => foo.bar))，所以要获取this的原始对象
  const self = toRaw(this)
  // 收集依赖
  trackRefValue(self)
  // 如果是脏数据，需要重新计算
  if (self._dirty || !self._cacheable) {
    // _dirty取false，防止依赖不变重复计算
    self._dirty = false
    // 计算
    self._value = self.effect.run()!
  }
  return self._value
}

当读取ComputedRefImpl实例的value属性时，由于计算属性可能被其他proxy包裹，所以需要使用toRaw获取其原始对象。

const self = toRaw(this)

然后调用trackRefValue进行依赖的收集。

export function trackRefValue(ref: RefBase<any>) {
  // 如果允许收集并且存在activeEffect进行依赖收集
  if (shouldTrack && activeEffect) {
    ref = toRaw(ref)
    if (__DEV__) {
      trackEffects(ref.dep || (ref.dep = createDep()), {
        target: ref,
        type: TrackOpTypes.GET,
        key: 'value'
      })
    } else {
      trackEffects(ref.dep || (ref.dep = createDep()))
    }
  }
}

接着根据_dirty与_cacheable属性来决定是否需要修改self._value，其中_dirty表示是否为脏数据，_cacheable表示是否可以缓存（取决于是否为服务端渲染，如果为服务端渲染则不可以缓存）。如果是脏数据或不可以被缓存，那么会将_dirty设置为false，并调用self.effect.run()，修改self._value。

if (self._dirty || !self._cacheable) {
  self._dirty = false
  self._value = self.effect.run()!
}

最后返回self._value

return self._value

value存值函数

set value(newValue: T) {
  this._setter(newValue)
}

当修改ComputedRefImpl实例的value属性时，会调用实例的_setter函数。

到此，你会发现computed是懒惰的，只有使用到computed的返回结果，才能触发相关计算。

为了加深对computed的理解，接下来以一个例子分析computed的缓存及计算过程：

const value = reactive({ foo: 1 })
const cValue = computed(() => value.foo)
console.log(cValue.value) // 1

value.foo = 2
console.log(cValue.value) // 2

当打印cValue.value时，会命中ComputedRefImpl对应的get方法，在get中，执行trackRefValue收集对应依赖（由于此时没有处于活跃状态的effect，即activeEffect，所以并不会进行依赖的收集），默认_dirty为true，将_dirty设置为false，并执行effect.run，计算数据，计算完成后将数据缓存至selft._vlaue中，方便下次的利用。在调用effect.run过程中，会将在ComputedRefImpl构造器中创建的ReactiveEffect实例收集到targetMap[toRaw(value)].foo中。

当修改value.foo = 2，触发targetMap[toRaw(value)].foo中的依赖，由于在初始化ReactiveEffect时，设置了一个调度器，所以在触发依赖过程中会执行这个调度器。这个调度器中会判断如果_dirty===false，则将_dirty设置为true，并手动调用triggerRefValue触发依赖，在调用triggerRefValue的过程中，因为cValue.dep=undefined，所以没有依赖要触发。

当第二次打印cValue.value时，由于_dirty为true，所以会执行cValue.effect.run，并将结果赋值给cValue._value，最后返回cValue._value，打印结果2

总结

computed本质也是个ref（ComputedRefImpl），它是懒惰的，如果不使用计算属性，那么是不会进行计算的，只有使用它，才会调用计算属性中的effect.run方法进行计算，同时将结果缓存到_value中。

computed如何重新计算？

首先在第一次获取计算属性的值的过程中会进行依赖的收集，假设计算属性的计算与响应式对象的a、b两个属性有关，那么会将computed中生成的ReactiveEffect实例收集到targetMap[obj].a、targetMap[obj].b中，一旦a或b属性变化了，会触发依赖，而在依赖的触发过程中会执行调度函数，在调度函数中会将脏数据的标识_dirty设置为true，并触发计算属性的依赖。那么在下一次使用到计算属性的话，由于_dirty为true，便会调用计算属性中的effect.run方法重新计算值。