Computed计算属性与Watch观察器

前言

本章我们开始介绍 Vue.js 的Computed计算属性与Watch观察器模块的源码，我们将在本章详细介绍这两个模块背后的原理。

希望经过本篇文章的介绍能够让读者对于Computed与Watch的实现原理与实际使用更加深入。

Computed计算属性

computed函数

Vue.js 3.0 使用computed函数来创建一个新的计算属性，computed接收Get、Set以及debugOptions参数，

默认情况下Set将会为空，Get函数里面的响应式数据将会作为依赖被收集。

// computed
export function computed<T>(
  getter: ComputedGetter<T>,
  debugOptions?: DebuggerOptions
): ComputedRef<T>

ComputedRefImpl

ComputedRefImpl是Computed计算属性的实际控制器，每当创建一个新的计算属性Computed便会构造一个新的ComputedRefImpl类，

首先ComputedRefImpl为每一个计算属性构造了一个新的effect，这个effect用于收集计算属性的依赖dep，

每当计算属性被引用时，执行trackRefValue函数将get中所遇到响应式数据的dep与之前所创建好的effect收集器完成绑定，从而完成计算属性对于其内部响应式数据的收集。

每当被收集的响应式数据更新时，effect会去执行effect.run操作将计算属性的更新推入下一个微任务更新队列中，更新视图。

最后dirty属性将标识缓存本次计算所得到的结果，除非依赖被更新时effect上面的scheduler回调函数才会被执行dirty变回到true,

开始重新执行计算属性的结果值。

export class ComputedRefImpl<T> {
  public dep?: Dep = undefined

  private _value!: T
  public readonly effect: ReactiveEffect<T>

  public readonly __v_isRef = true
  public readonly [ReactiveFlags.IS_READONLY]: boolean

  public _dirty = true // 判断当前计算属性是否需要更新
  public _cacheable: boolean // 是否缓存数据

  constructor(
    getter: ComputedGetter<T>,
    private readonly _setter: ComputedSetter<T>,
    isReadonly: boolean,
    isSSR: boolean
  ) {
    // 创建新的effect
    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() {
    // the computed ref may get wrapped by other proxies e.g. readonly() #3376
    const self = toRaw(this)
    trackRefValue(self) // 收集依赖
    if (self._dirty || !self._cacheable) {
      self._dirty = false
      self._value = self.effect.run()! // 执行计算属性更新操作
    }
    return self._value
  }

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

Watch观察器

Watch观察器的组成部分

在 Vue.js 3.0 中watch观察器存在watchEffect与watch函数两种，而其本质均是doWatch的变体函数。

一个完整的watch观察器主要包括两个部分：

• Getter：被观察的属性，在watchEffect中是回调函数

• SchedulerJob：被执行的回调函数

getter

getter存在三种不同情形，当被观察的是一个响应式数据ref或者reactive时，其返回的是被观察的响应式数据本身，

而当需要同时观察多个数据时，其返回的则是被观察的响应式数据的一维数据，与计算属性相同，这里的数据同样会被依赖收集。

最后当被观察的是一个函数时，其返回的则是一个被callWithErrorHandling包裹的高阶函数。

if (isRef(source)) {
  getter = () => source.value
  forceTrigger = isShallow(source)
} else if (isReactive(source)) {
  getter = () => source
  deep = true
} else if (isArray(source)) {
  getter = () => {...}
} else if (isFunction(source)) {
  getter = () => callWithErrorHandling(source, instance, ErrorCodes.WATCH_GETTER)
}

watchJob

在watch观察器中getter属于被观察的对象，而watchJob则是执行函数，与计算属性相同watch观察器中同样会构建effect用于依赖收集与组件更新。

watchJob的执行分为三种情况，当immediate属性存在时watchJob会被当做独立函数立即执行，当依赖被更新或者组件更新时，effect将会被运行。

而当flush === 'post'时，这个运行会被延后到组件刷新后的下一个微任务队列中。

当watchJob被执行时同样会分为两种情况，当被观察的是响应式数据时，其与computed计算属性相同会收集响应式的dep依赖，当依赖更新时才会被触发，

而当被观察的是函数时，这个effect会被关联到当前的effectscope作用域中，每当组件或者effectscope需要更新时，开始执行。

const job: SchedulerJob = () => {
    if (!effect.active) {
      return
    }
    if (cb) {
      // watch(source, cb)
      const newValue = effect.run()
      if (
        deep ||
        forceTrigger ||
        (isMultiSource
          ? (newValue as any[]).some((v, i) =>
              hasChanged(v, (oldValue as any[])[i])
            )
          : hasChanged(newValue, oldValue)) ||
        (__COMPAT__ &&
          isArray(newValue) &&
          isCompatEnabled(DeprecationTypes.WATCH_ARRAY, instance))
      ) {
        // cleanup before running cb again
        if (cleanup) {
          cleanup()
        }
        callWithAsyncErrorHandling(cb, instance, ErrorCodes.WATCH_CALLBACK, [
          newValue,
          // pass undefined as the old value when it's changed for the first time
          oldValue === INITIAL_WATCHER_VALUE ? undefined : oldValue,
          onCleanup
        ])
        oldValue = newValue
      }
    } else {
      // watchEffect
      effect.run()
    }
  }

stopWatcher

watch函数会返回一个stop函数，当执行stop时，watch会销毁这个effect并从当前的effectScope中移除。

return () => {
  effect.stop()
  if (instance && instance.scope) {
    remove(instance.scope.effects!, effect)
  }
}

总结

本章我们详细的介绍了Computed计算属性与Watch观察器的运行机制。

本章内容并不复杂，读懂本章的核心仍然是在理解effect与schduler这两个模块，Computed与Watch均是在此基础上而来的。

对于effect与schduler模块请阅读本系列文章的对应章节。