前言

在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
}

ComputedRefImpl

class ComputedRefImpl<T> {
  // 缓存结果
  private _value!: T
  // 重新计算开关
  private _dirty = true
  public readonly effect: reactiveEffect<T>
  public readonly __v_isRef = true;
  public readonly [ReactiveFlags.IS_READONLY]: boolean
  constructor(
    getter: ComputedGetter<T>,
    private readonly _setter: ComputedSetter<T>,
    isReadonly: boolean
  ) {
    // 对传入的getter函数进行包装
    this.effect = effect(getter, {
      lazy: true,
      // 调度执行
      scheduler: () => {
        if (!this._dirty) {
          this._dirty = true
          // 派发通知
          trigger(toRaw(this), TriggerOpTypes.SET, 'value')
        }
      }
    })
  }
  // 访问计算属性的时候 默认调用此时的get函数
  get value() {
    // 是否需要重新计算
    if (this._dirty) {
      this._value = this.effect()
      this._dirty = false
    }
    // 访问的时候进行依赖收集 此时收集的是访问这个计算属性的副作用函数
    track(toRaw(this), TrackOpTypes.GET, 'value')
    return this._value
  }

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

ComputedRefImpl类在内部维护了_value和_dirty这两个非常重要的私有属性,其中_value使用用来缓存我们计算的结果，_dirty是用来控制是否需要重现计算。接下来我们来看一下这个函数的内部运行机制。

const run = (effect: ReactiveEffect) => {
    if (effect.options.scheduler) {
      effect.options.scheduler(effect)
    } else {
      effect()
    }
  }
effects.forEach(run)

当属性值发生改变之后，会触发trigger函数进行派发更新，将所有依赖这个属性的effect函数循环遍历,使用run函数执行effect,如果effect的参数中配置了scheduler，则就执行scheduler函数，而不是执行依赖的副作用函数。当计算属性依赖的属性发生变化的时候，回执行包装getter函数的effect, 但是因为配置了scheduler函数，所以真正执行的是scheduler函数，在scheduler函数中并没有执行计算属性的getter函数求取新值,而是将_dirty设置为false,然后通知依赖计算属性的副作用函数进行更新, 当依赖计算属性的副作用函数收到通知的时候就会访问计算属性的get函数，此时会根据_dirty值来确定是否需要重新计算。

回到我们的这个构造函数中，只需要记得我们在构造函数初始化三个重要的点：第一：对传入的getter函数使用effect函数进行包装。第二：在使用effect包装的过程中，我们会执行getter函数，此时getter函数执行过程中对于访问到的属性会将当前的这个计算属性收集到对应的依赖集合中, 第三：传入了配置参数lazy和scheduler，这些配置参数在当前的这个计算属性所订阅的属性发生改变的时候，用来控制计算属性的调度时机。

示例流程

至此计算属性的执行流程就分析完毕了，我们来结合一个示例来完整的过一遍整个流程：

<template>
    <div>
        <button @click="addNum">add</button>
        <p>计算属性：{{computedData}}</p>
    </div>
</template>

<script>
import { ref, watch,reactive, computed } from 'vue' 
import { effect } from '@vue/reactivity'
export default {
  name: 'App',
  setup(){
    const testData = ref(1)
    const computedData = computed(() => {
      return testData.value++
    })
    function addNum(){
      testData.value += 10
    }
    return {
      addNum,
      computedData
    }
  },
}

</script>

下面是一张流程图，当点击页面中的按钮改变testData的value值时，发生的变化流程就是下面的红线部分。

总结

计算属性两个最大的特点就是

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/9953