Vue3源码解析（computed-计算属性）

作者：秦志英

前言

上一篇文章中我们分析了Vue3响应式的整个流程，本篇文章我们将分析Vue3中的computed计算属性是如何实现的。

在Vue2中我们已经对计算属性了解的很清楚了，在Vue3中提供了一个computed的函数作为计算属性的API,下面我们来通过源码的角度去分析计算属性的运行流程。

computed

export function computed<T>(getter: ComputedGetter<T>): ComputedRef<T>
export function computed<T>(
  options: WritableComputedOptions<T>
): WritableComputedRef<T>
export function computed<T>(
  getterOrOptions: ComputedGetter<T> | WritableComputedOptions<T>
) {
  let getter: ComputedGetter<T>
  let setter: ComputedSetter<T>
  if (isFunction(getterOrOptions)) {
    getter = getterOrOptions
    setter = NOOP
  } else {
    getter = getterOrOptions.get
    setter = getterOrOptions.set
  }
  return new ComputedRefImpl(
    getter,
    setter,
    isFunction(getterOrOptions) || !getterOrOptions.set
  ) as any
}

• 在最开始使用函数重载的方式允许computed函数接受两种类型的参数：第一种是一个getter函数, 第二种是一个带get和set的对象。
• 接下就是在函数内部根据传入的不同类型的参数初始化函数内部的getter和setter函数,如果传入的是一个函数类型的参数,那么getter就是这个函数，setter就是一个空的操作,如果传入的参数是一个对象,则getter就等于这个对象的get函数,setter就等于这个对象的set函数。
• 在函数的结尾返回了一个new ComputedRefImpl,并将前面我们标准化后的参数传递给了这个构造函数。 下面我们就来分析一下ComputedRefImpl这个构造函数。