Vue3 계산 및 소스 코드 분석 보기

computed

Computed와 watch는 인터뷰에서 차이점에 대해 자주 질문을 받기 때문에 소스 코드 구현에서 구체적인 구현을 살펴보겠습니다.

// packages/reactivity/src/computed.ts
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(&#39;Write operation failed: computed value is readonly&#39;)
        }
      : NOOP
  } else {
    getter = getterOrOptions.get
    setter = getterOrOptions.set
  }
  // new ComputedRefImpl
  const cRef = new ComputedRefImpl(getter, setter, onlyGetter || !setter, isSSR)
  if (__DEV__ && debugOptions && !isSSR) {
    cRef.effect.onTrack = debugOptions.onTrack
    cRef.effect.onTrigger = debugOptions.onTrigger
  }
  // 返回ComputedRefImpl实例
  return cRef as any
}

computed는 내부적으로 getter와 setter만 먼저 처리하는 것을 볼 수 있으며, 그런 다음 새로운 ComputedRefImpl이 반환됩니다. ref API의 구현을 알면 해당 구현에 많은 유사점이 있음을 알 수 있습니다

ComputeRefImpl

// packages/reactivity/src/computed.ts
export class ComputedRefImpl<T> {
  public dep?: Dep = undefined // 存储effect的集合
  private _value!: T
  public readonly effect: ReactiveEffect<T>
  public readonly __v_isRef = true
  public readonly [ReactiveFlags.IS_READONLY]: boolean = false
  public _dirty = true // 是否需要重新更新value
  public _cacheable: boolean
  constructor(
    getter: ComputedGetter<T>,
    private readonly _setter: ComputedSetter<T>,
    isReadonly: boolean,
    isSSR: boolean
  ) {
    // 创建effect
    this.effect = new ReactiveEffect(getter, () => {
      // 调度器执行 重新赋值_dirty为true
      if (!this._dirty) {
        this._dirty = true
        // 触发effect
        triggerRefValue(this)
      }
    })
    // 用于区分effect是否是computed
    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
    // computed ref可能被其他代理包装，例如readonly() #3376
    // 通过toRaw()获取原始值
    const self = toRaw(this)
    // 收集effect
    trackRefValue(self)
    // 如果是脏的，重新执行effect.run()，并且将_dirty设置为false
    if (self._dirty || !self._cacheable) {
      self._dirty = false
      // run()方法会执行getter方法 值会被缓存到self._value
      self._value = self.effect.run()!
    }
    return self._value
  }
  set value(newValue: T) {
    this._setter(newValue)
  }
}

ComputedRefImplget의 get 구현이 기본적으로 get 구현과 동일하다는 것을 알 수 있습니다. ref 구현에 익숙하지 않은 분은 이전 장을 참조하십시오. 유일한 차이점은 _dirty 값에 대한 판단입니다. 이것은 우리가 종종 계산된 값을 캐시할 것이라고 말하는 것입니다. 값을 업데이트해야 합니까?

계산된 생성자에서 getter와 내부 응답 데이터 간의 관계가 설정되는 것을 볼 수 있습니다. 이는 구성 요소 업데이트 함수와 응답 데이터 간의 관계와 동일하므로 getter와 관련된 응답 데이터가 생성됩니다. 시간이 수정되면 getter 효과에 해당하는 스케줄러가 트리거됩니다. 여기서 _dirty는 true로 설정되고 수집된 효과가 실행됩니다(일반적으로 get에서 수집된 함수 업데이트의 효과입니다). function update 함수가 실행되면 계산된 get이 다시 트리거됩니다. 이때 dirty는 true로 설정되고 getter는 새 값 반환을 얻기 위해 다시 실행되며 값은 _vlaue에 캐시됩니다.

요약:

그래서 계산에는 두 개의 반응형 처리 계층이 있습니다. 한 계층은 계산된 값과 함수 효과(ref 구현과 유사) 사이의 관계이고, 다른 계층은 계산된 게터와 반응형 데이터입니다. . 관계.

참고: 주의 깊게 살펴보면 함수 업데이트 함수의 효과 트리거링과 계산된 게터 효과의 트리거링 사이에 시퀀스 문제가 있을 수 있다는 것을 알게 될 것입니다. getter에만 존재하는 것이 아니라 함수 render에서 getter보다 먼저 액세스되는 응답 데이터 a가 있는 경우 a에 해당하는 dep의 업데이트 함수의 효과는 a의 효과보다 먼저 수집됩니다. a가 Change인 경우 업데이트 함수의 효과가 먼저 실행되고, 렌더링 함수가 계산된 값에 액세스하면 getter의 효과가 실행되지 않았기 때문에 _dirty가 여전히 false임을 알게 됩니다. 현재로서는 여전히 이전 값이 됩니다. vue3의 이에 대한 해결책은 효과를 실행할 때 계산에 해당하는 효과가 먼저 실행된다는 것입니다(이전 장에서도 언급함).

// packages/reactivity/src/effect.ts
export function triggerEffects(
  dep: Dep | ReactiveEffect[],
  debuggerEventExtraInfo?: DebuggerEventExtraInfo
) {
  // spread into array for stabilization
  const effects = isArray(dep) ? dep : [...dep]
  // computed的effect会先执行
  // 防止render获取computed值得时候_dirty还没有置为true
  for (const effect of effects) {
    if (effect.computed) {
      triggerEffect(effect, debuggerEventExtraInfo)
    }
  }
  for (const effect of effects) {
    if (!effect.computed) {
      triggerEffect(effect, debuggerEventExtraInfo)
    }
  }
}

watch

watch는 getter와 getter만 설정하면 되기 때문에 계산보다 간단합니다. 반응성 데이터 간의 관계, 반응형 데이터가 변경될 때 사용자가 전달한 콜백을 호출하고 이전 값과 새 값을 전달하기만 하면 됩니다 ​​

// packages/runtime-core/src/apiWatch.ts
export function watch<T = any, Immediate extends Readonly<boolean> = false>(
  source: T | WatchSource<T>,
  cb: any,
  options?: WatchOptions<Immediate>
): WatchStopHandle {
  if (__DEV__ && !isFunction(cb)) {
    warn(...)
  }
  // watch 具体实现
  return doWatch(source as any, cb, options)
}

function doWatch(
  source: WatchSource | WatchSource[] | WatchEffect | object,
  cb: WatchCallback | null,
  { immediate, deep, flush, onTrack, onTrigger }: WatchOptions = EMPTY_OBJ
): WatchStopHandle {
  if (__DEV__ && !cb) {
    ...
  }
  const warnInvalidSource = (s: unknown) => {
    warn(...)
  }
  const instance =
    getCurrentScope() === currentInstance?.scope ? currentInstance : null
  // const instance = currentInstance
  let getter: () => any
  let forceTrigger = false
  let isMultiSource = false
  // 根据不同source 创建不同的getter函数
  // getter 函数与computed的getter函数作用类似
  if (isRef(source)) {
    getter = () => source.value
    forceTrigger = isShallow(source)
  } else if (isReactive(source)) {
    // source是reactive对象时 自动开启deep=true
    getter = () => source
    deep = true
  } else if (isArray(source)) {
    isMultiSource = true
    forceTrigger = source.some(s => isReactive(s) || isShallow(s))
    getter = () =>
      source.map(s => {
        if (isRef(s)) {
          return s.value
        } else if (isReactive(s)) {
          return traverse(s)
        } else if (isFunction(s)) {
          return callWithErrorHandling(s, instance, ErrorCodes.WATCH_GETTER)
        } else {
          __DEV__ && warnInvalidSource(s)
        }
      })
  } else if (isFunction(source)) {
    if (cb) {
      // getter with cb
      getter = () =>
        callWithErrorHandling(source, instance, ErrorCodes.WATCH_GETTER)
    } else {
      // no cb -> simple effect
      getter = () => {
        if (instance && instance.isUnmounted) {
          return
        }
        if (cleanup) {
          cleanup()
        }
        return callWithAsyncErrorHandling(
          source,
          instance,
          ErrorCodes.WATCH_CALLBACK,
          [onCleanup]
        )
      }
    }
  } else {
    getter = NOOP
    __DEV__ && warnInvalidSource(source)
  }
  // 2.x array mutation watch compat
  // 兼容vue2
  if (__COMPAT__ && cb && !deep) {
    const baseGetter = getter
    getter = () => {
      const val = baseGetter()
      if (
        isArray(val) &&
        checkCompatEnabled(DeprecationTypes.WATCH_ARRAY, instance)
      ) {
        traverse(val)
      }
      return val
    }
  }
  // 深度监听
  if (cb && deep) {
    const baseGetter = getter
    // traverse会递归遍历对象的所有属性 以达到深度监听的目的
    getter = () => traverse(baseGetter())
  }
  let cleanup: () => void
  // watch回调的第三个参数 可以用此注册一个cleanup函数 会在下一次watch cb调用前执行
  // 常用于竞态问题的处理
  let onCleanup: OnCleanup = (fn: () => void) => {
    cleanup = effect.onStop = () => {
      callWithErrorHandling(fn, instance, ErrorCodes.WATCH_CLEANUP)
    }
  }
  // in SSR there is no need to setup an actual effect, and it should be noop
  // unless it's eager or sync flush
  let ssrCleanup: (() => void)[] | undefined
  if (__SSR__ && isInSSRComponentSetup) {
    // ssr处理 ...
  }
  // oldValue 声明 多个source监听则初始化为数组
  let oldValue: any = isMultiSource
    ? new Array((source as []).length).fill(INITIAL_WATCHER_VALUE)
    : INITIAL_WATCHER_VALUE
  // 调度器调用时执行
  const job: SchedulerJob = () => {
    if (!effect.active) {
      return
    }
    if (cb) {
      // watch(source, cb)
      // 获取newValue
      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) {
          // 执行onCleanup传过来的函数
          cleanup()
        }
        // 调用cb 参数为newValue、oldValue、onCleanup
        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
            : isMultiSource && oldValue[0] === INITIAL_WATCHER_VALUE
            ? []
            : oldValue,
          onCleanup
        ])
        // 更新oldValue
        oldValue = newValue
      }
    } else {
      // watchEffect
      effect.run()
    }
  }
  // important: mark the job as a watcher callback so that scheduler knows
  // it is allowed to self-trigger (#1727)
  job.allowRecurse = !!cb
  let scheduler: EffectScheduler
  if (flush === 'sync') {
    // 同步更新 即每次响应式数据改变都会回调一次cb 通常不使用
    scheduler = job as any // the scheduler function gets called directly
  } else if (flush === 'post') {
    // job放入pendingPostFlushCbs队列中
    // pendingPostFlushCbs队列会在queue队列执行完毕后执行 函数更新effect通常会放在queue队列中
    // 所以pendingPostFlushCbs队列执行时组件已经更新完毕
    scheduler = () => queuePostRenderEffect(job, instance && instance.suspense)
  } else {
    // default: 'pre'
    job.pre = true
    if (instance) job.id = instance.uid
    // 默认异步更新 关于异步更新会和nextTick放在一起详细讲解
    scheduler = () => queueJob(job)
  }
  // 创建effect effect.run的时候建立effect与getter内响应式数据的关系
  const effect = new ReactiveEffect(getter, scheduler)
  if (__DEV__) {
    effect.onTrack = onTrack
    effect.onTrigger = onTrigger
  }
  // initial run
  if (cb) {
    if (immediate) {
      // 立马执行一次job
      job()
    } else {
      // 否则执行effect.run() 会执行getter 获取oldValue
      oldValue = effect.run()
    }
  } else if (flush === 'post') {
    queuePostRenderEffect(
      effect.run.bind(effect),
      instance && instance.suspense
    )
  } else {
    effect.run()
  }
  // 返回一个取消监听的函数
  const unwatch = () => {
    effect.stop()
    if (instance && instance.scope) {
      remove(instance.scope.effects!, effect)
    }
  }
  if (__SSR__ && ssrCleanup) ssrCleanup.push(unwatch)
  return unwatch
}

위 내용은 Vue3 계산 및 소스 코드 분석 보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!