Vue3 Listener Watch의 구현 원리는 무엇입니까

watch의 본질

소위 시계의 본질은 반응하는 데이터를 관찰하고, 데이터가 변경되면 이를 알리고 해당 콜백 함수를 실행하는 것입니다. 실제로 watch의 구현 본질은 effect 및 options.scheduler 옵션을 사용하는 것입니다. 다음 예와 같이

// watch 函数接收两个参数，source 是响应式数据，cb 是回调函数
function watch(source, cb){
  effect(
    // 触发读取操作，从而建立联系
  	() => source.foo,
    {
      scheduler(){
        // 当数据变化时，调用回调函数 cb
        cb()
      }
    }
  )
}

코드에서 보듯이 source는 반응형 데이터이고 cb는 콜백 함수입니다. Side Effect 함수에 스케줄러 옵션이 있는 경우, 반응형 데이터가 변경되면 Side Effect 기능을 직접 실행하는 것이 아니라 스케줄러 기능을 실행하게 됩니다. 이러한 관점에서 스케줄러 스케줄링 기능은 콜백 기능과 동일하며 watch 구현은 이를 활용합니다.

watch

의 함수 서명은 여러 소스를 수신합니다

청취할 데이터 소스는 아래 함수 서명에 표시된 것처럼 배열일 수 있습니다.

// packages/runtime-core/src/apiWatch.ts

// 数据源是一个数组
// overload: array of multiple sources + cb
export function watch<
  T extends MultiWatchSources,
  Immediate extends Readonly<boolean> = false
>(
  sources: [...T],
  cb: WatchCallback<MapSources<T, false>, MapSources<T, Immediate>>,
  options?: WatchOptions<Immediate>
): WatchStopHandle

배열을 사용하여 여러 소스를 수신할 수도 있습니다.

// packages/runtime-core/src/apiWatch.ts

// 使用数组同时侦听多个源
// overload: multiple sources w/ `as const`
// watch([foo, bar] as const, () => {})
// somehow [...T] breaks when the type is readonly
export function watch<
  T extends Readonly<MultiWatchSources>,
  Immediate extends Readonly<boolean> = false
>(
  source: T,
  cb: WatchCallback<MapSources<T, false>, MapSources<T, Immediate>>,
  options?: WatchOptions<Immediate>
): WatchStopHandle

단일 소스 청취

청취할 데이터 소스는 다음과 같이 ref 유형 데이터 또는 반환 값이 있는 getter 함수입니다. 함수 서명:

// packages/runtime-core/src/apiWatch.ts

// 数据源是一个 ref 类型的数据 或者是一个具有返回值的 getter 函数
// overload: single source + cb
export function watch<T, Immediate extends Readonly<boolean> = false>(
source: WatchSource<T>,
 cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
 options?: WatchOptions<Immediate>
): WatchStopHandle

export type WatchSource<T = any> = Ref<T> | ComputedRef<T> | (() => T)

청취할 데이터 소스는 다음 함수 서명에 표시된 것처럼 반응형 obj 개체입니다.

// packages/runtime-core/src/apiWatch.ts

// 数据源是一个响应式的 obj 对象
// overload: watching reactive object w/ cb
export function watch<
  T extends object,
  Immediate extends Readonly<boolean> = false
>(
  source: T,
  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
  options?: WatchOptions<Immediate>
): WatchStopHandle

watch 구현

watch 함수

// packages/runtime-core/src/apiWatch.ts

// implementation
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(fn, options?)\` signature has been moved to a separate API. ` +
        `Use \`watchEffect(fn, options?)\` instead. \`watch\` now only ` +
        `supports \`watch(source, cb, options?) signature.`
    )
  }
  return doWatch(source as any, cb, options)
}

보시다시피 watch 함수는 3개의 매개변수: source 수신할 데이터 소스, cb 콜백 함수, 옵션 수신 옵션.

source 매개변수

watch의 함수 오버로드를 통해 단일 소스를 들을 때 소스가 ref 유형 데이터이거나 반환 값이 있는 getter 함수일 수도 있고, 반응형 obj 객체일 수도 있다는 것을 알 수 있습니다. 여러 소스를 청취할 때 소스는 배열이 될 수 있습니다.

cb 매개변수

cb 콜백 함수에서는 개발자에게 최신 값, 이전 값 및 부작용 제거를 위한 onCleanup 함수를 제공합니다. 다음 유형 정의에서 볼 수 있듯이:

export type WatchCallback<V = any, OV = any> = (
  value: V,
  oldValue: OV,
  onCleanup: OnCleanup
) => any

options 매개변수

options 옵션은 시계의 동작을 제어할 수 있습니다. 예를 들어 옵션의 즉시 옵션 매개변수를 사용하여 시계의 콜백이 즉시 실행되는지 여부를 제어할 수 있습니다. 옵션의 옵션 매개변수를 사용하여 시계의 콜백 기능을 동기식으로 실행할지 비동기식으로 실행할지 제어할 수 있습니다. 옵션 매개변수의 유형 정의는 다음과 같습니다.

export interface WatchOptionsBase extends DebuggerOptions {
  flush?: 'pre' | 'post' | 'sync'
}
export interface WatchOptions<Immediate = boolean> extends WatchOptionsBase {
  immediate?: Immediate
  deep?: boolean
}

WatchOptions가 WatchOptionsBase를 상속하는 옵션의 유형 정의를 볼 수 있습니다. 즉, watch 옵션의 즉각적 및 심층적이라는 두 가지 고유 매개변수 외에도 WatchOptionsBase의 모든 매개변수를 전달하여 부작용 실행 동작을 제어할 수도 있습니다.

doWatch 함수는 watch의 함수 본문에서 호출됩니다. 구현을 살펴보겠습니다.

doWatch 함수

사실 watch 함수든 watchEffect 함수든 결국 doWatch 함수는 실행 중에 호출됩니다.

doWatch 함수 시그니처

function doWatch(
  source: WatchSource | WatchSource[] | WatchEffect | object,
  cb: WatchCallback | null,
  { immediate, deep, flush, onTrack, onTrigger }: WatchOptions = EMPTY_OBJ
): WatchStopHandle

doWatch의 함수 시그니처는 기본적으로 watch의 함수 시그니처와 동일하며, 3개의 매개변수도 받습니다. options 옵션의 사용을 용이하게 하기 위해 doWatch 함수는 옵션을 분해합니다.

변수 초기화

먼저, 구성 요소를 통해 현재 구성 요소 인스턴스를 가져온 다음 세 가지 다른 변수를 선언합니다. 함수 중 하나는 getter라고 하며 부작용 함수에 인수로 전달됩니다. forceTrigger 변수는 부작용 기능을 강제로 적용해야 하는지 여부를 나타내는 부울 값입니다. isMultiSource 변수는 수신 데이터 소스가 단일 소스인지 또는 배열 형식으로 전달된 여러 소스인지를 표시하는 데 사용되는 부울 값이기도 합니다. 이는 수신 데이터 소스가 단일 소스임을 나타냅니다. 아래 코드와 같이

  const instance = currentInstance
  let getter: () => any
  // 是否需要强制触发副作用函数执行   
  let forceTrigger = false
  // 侦听的是否是多个源
  let isMultiSource = false

다음으로 청취한 데이터 소스에 따라 이 세 가지 변수를 초기화합니다.

청취 데이터 소스가 ref 유형 데이터입니다

청취 데이터 소스가 ref 유형 데이터인 경우 source.value를 반환하여 getter가 초기화됩니다. 즉, getter 함수가 트리거되면 실제 청취 데이터가 됩니다. source.value를 통해 얻을 수 있습니다. 그런 다음 isShallow 함수를 사용하여 수신된 데이터 소스가 얕은 응답인지 확인하고 결과를 forceTrigger에 할당하여 forceTrigger 변수의 초기화를 완료합니다. 다음 코드와 같이

if (isRef(source)) {
  // 侦听的数据源是 ref
  getter = () => source.value
  // 判断数据源是否是浅响应
  forceTrigger = isShallow(source)
}

청취 데이터 소스가 반응형 데이터

청취 데이터 소스가 반응형 데이터인 경우 소스를 직접 반환하여 getter를 초기화합니다. 즉, getter 함수가 다음과 같은 경우입니다. Triggered 수신 데이터 소스를 직접 반환합니다. 반응형 데이터가 객체일 수 있으므로 deep을 true로 설정하면 getter 함수가 트리거될 때 객체의 속성 값을 재귀적으로 읽을 수 있습니다. 아래 코드와 같이

else if (isReactive(source)) {
  // 侦听的数据源是响应式数据
  getter = () => source
  deep = true
}

청취 데이터 소스가 배열입니다

청취 데이터 소스가 배열인 경우, 즉 여러 소스를 동시에 청취합니다. 이때 isMultiSource 변수를 직접 true로 설정하여 여러 소스가 청취되고 있음을 나타냅니다. 그런 다음 배열의 some 메서드를 사용하여 여러 수신 소스에 응답 개체가 있는지 감지하고 결과를 forceTrigger에 할당합니다. 배열을 탐색하고 각 소스의 유형에 따라 getter 함수의 초기화를 완료합니다. 아래 코드와 같이

else if (isArray(source)) {
  // 侦听的数据源是一个数组，即同时侦听多个源
  isMultiSource = true
  forceTrigger = source.some(isReactive)
  getter = () =>
    // 遍历数组，判断每个源的类型 
    source.map(s => {
      if (isRef(s)) {
        // 侦听的数据源是 ref  
        return s.value
      } else if (isReactive(s)) {
        // 侦听的数据源是响应式数据 
        return traverse(s)
      } else if (isFunction(s)) {
        // 侦听的数据源是一个具有返回值的 getter 函数 
        return callWithErrorHandling(s, instance, ErrorCodes.WATCH_GETTER)
      } else {
        __DEV__ && warnInvalidSource(s)
      }
    })
}

청취 데이터 소스는 함수

입니다.

当侦听的数据源是一个具有返回值的 getter 函数时，判断 doWatch 函数的第二个参数 cb 是否有传入。如果有传入，则处理的是 watch 函数的场景，此时执行 source 函数，将执行结果赋值给 getter 。该情况仅适用于 watchEffect 函数未接收到参数的情况。如果组件实例已被卸载，则直接返回而不执行 source 函数，根据该场景进行处理。如果未能执行成功，则执行清除依赖的代码并调用source函数，将返回结果赋值给getter。如下面的代码所示：

else if (isFunction(source)) {

  // 处理 watch 和 watchEffect 的场景
  // watch 的第二个参数可以是一个具有返回值的 getter 参数，第二个参数是一个回调函数
  // watchEffect 的参数是一个 函数

  // 侦听的数据源是一个具有返回值的 getter 函数 
  if (cb) {
    // getter with cb
    // 处理的是 watch 的场景
    // 执行 source 函数，将执行结果赋值给 getter   
    getter = () =>
      callWithErrorHandling(source, instance, ErrorCodes.WATCH_GETTER)
  } else {
    // no cb -> simple effect
    // 没有回调，即为 watchEffect 的场景  
    getter = () => {
      // 件实例已经卸载，则不执行，直接返回
      if (instance && instance.isUnmounted) {
        return
      }
      // 清除依赖
      if (cleanup) {
        cleanup()
      }
      // 执行 source 函数
      return callWithAsyncErrorHandling(
        source,
        instance,
        ErrorCodes.WATCH_CALLBACK,
        [onCleanup]
      )
    }
  }
}

递归读取响应式数据

如果侦听的数据源是一个响应式数据，需要递归读取响应式数据中的属性值。如下面的代码所示：

// 处理的是 watch 的场景
// 递归读取对象的属性值  
if (cb && deep) {
  const baseGetter = getter
  getter = () => traverse(baseGetter())
}

在上面的代码中，doWatch 函数的第二个参数 cb 有传入，说明处理的是 watch 中的场景。deep 变量为 true ，说明此时侦听的数据源是一个响应式数据，因此需要调用 traverse 函数来递归读取数据源中的每个属性，对其进行监听，从而当任意属性发生变化时都能够触发回调函数执行。

定义清除副作用函数

声明 cleanup 和 onCleanup 函数，并在 onCleanup 函数的执行过程中给 cleanup 函数赋值，当副作用函数执行一些异步的副作用时，这些响应需要在其失效是清除。如下面的代码所示：

// 清除副作用函数
let cleanup: () => void
let onCleanup: OnCleanup = (fn: () => void) => {
  cleanup = effect.onStop = () => {
    callWithErrorHandling(fn, instance, ErrorCodes.WATCH_CLEANUP)
  }
}

封装 scheduler 调度函数

为了便于控制 watch 的回调函数 cb 的执行时机，需要将 scheduler 调度函数封装为一个独立的 job 函数，如下面的代码所示：

// 将 scheduler 调度函数封装为一个独立的 job 函数，便于在初始化和变更时执行它
const job: SchedulerJob = () => {
  if (!effect.active) {
    return
  }
  if (cb) {
    // 处理 watch 的场景 
    // 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()
      }

      // 执行watch 函数的回调函数 cb，将旧值和新值作为回调函数的参数
      callWithAsyncErrorHandling(cb, instance, ErrorCodes.WATCH_CALLBACK, [
        newValue,
        
        // 首次调用时，将 oldValue 的值设置为 undefined
        // 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
    // 处理 watchEffect 的场景
    effect.run()
  }
}

在 job 函数中，判断回调函数 cb 是否传入，如果有传入，那么是 watch 函数被调用的场景，否则就是 watchEffect 函数被调用的场景。

如果是 watch 函数被调用的场景，首先执行副作用函数，将执行结果赋值给 newValue 变量，作为最新的值。然后判断需要执行回调函数 cb 的情况：

• 如果侦听的数据源是响应式数据，需要深度侦听，即 deep 为 true

• 如果需要强制触发副作用函数执行，即 forceTrigger 为 true

• 如果新旧值发生了变化

如果存在上述三种情况之一，就必须执行 watch 函数的回调函数 cb。如果回调函数 cb 是再次执行，在执行之前需要先清除副作用。然后调用 callWithAsyncErrorHandling 函数执行回调函数cb，并将新值newValue 和旧值 oldValue 传入回调函数cb中。在回调函数cb执行后，更新旧值oldValue，避免在下一次执行回调函数cb时获取到错误的旧值。

如果是 watchEffect 函数被调用的场景，则直接执行副作用函数即可。

设置 job 的 allowRecurse 属性

设置 job 函数的 allowRecurse 属性根据是否传递回调函数 cb 来进行。这个设置非常关键，因为它可以使作业充当监听器的回调，这样调度程序就能够知道它是否允许调用自身。

// important: mark the job as a watcher callback so that scheduler knows
// it is allowed to self-trigger (#1727)
// 重要：让调度器任务作为侦听器的回调以至于调度器能知道它可以被允许自己派发更新
job.allowRecurse = !!cb

flush 选项指定回调函数的执行时机

在调用 watch 函数时，可以通过 options 的 flush 选项来指定回调函数的执行时机：

• 当 flush 的值为 sync 时，代表调度器函数是同步执行，此时直接将 job 赋值给 scheduler，这样调度器函数就会直接执行。

• 当 flush 的值为 post 时，代表调度函数需要将副作用函数放到一个微任务队列中，并等待 DOM 更新结束后再执行。

• 当 flush 的值为 pre 时，即调度器函数默认的执行方式，这时调度器会区分组件是否已经挂载。如果组件未挂载，则先执行一次调度函数，即执行回调函数cb。在组件挂载之后，将调度函数推入一个优先执行时机的队列中。

  // 这里处理的是回调函数的执行时机
  let scheduler: EffectScheduler if (flush === 'sync') { // 同步执行，将 job 直接赋值给调度器 scheduler = job as any // the scheduler function gets called directly } else if (flush === 'post') { // 将调度函数 job 添加到微任务队列中执行 scheduler = () => queuePostRenderEffect(job, instance && instance.suspense) } else { // default: 'pre' // 调度器函数默认的执行模式 scheduler = () => { if (!instance || instance.isMounted) { // 组件挂载后将 job 推入一个优先执行时机的队列中 queuePreFlushCb(job) } else { // with 'pre' option, the first call must happen before // the component is mounted so it is called synchronously. // 在 pre 选型中，第一次调用必须发生在组件挂载之前 // 所以这次调用是同步的 job() } } }

创建副作用函数

初始化完 getter 函数和调度器函数 scheduler 后，调用 ReactiveEffect 类来创建一个副作用函数

// 创建一个副作用函数
const effect = new ReactiveEffect(getter, scheduler)

执行副作用函数

在执行副作用函数之前，首先判断是否传入了回调函数cb，如果有传入，则根据 options 的 immediate 选项来判断是否需要立即执行回调函数cb，如果指定了immediate 选项，则立即执行 job 函数，即 watch 的回调函数会在 watch 创建时立即执行一次。如果不这样做，就需要手动调用副作用函数，将其返回值赋值给oldValue作为旧值。如下面的代码所示：

if (cb) {
  // 选项参数 immediate 来指定回调是否需要立即执行
  if (immediate) {
    // 回调函数会在 watch 创建时立即执行一次
    job()
  } else {
    // 手动调用副作用函数，拿到的就是旧值
    oldValue = effect.run()
  }
}

如果 options 的 flush 选项的值为 post ，需要将副作用函数放入到微任务队列中，等待组件挂载完成后再执行副作用函数。如下面的代码所示：

else if (flush === 'post') {
  // 在调度器函数中判断 flush 是否为 'post'，如果是，将其放到微任务队列中执行
  queuePostRenderEffect(
    effect.run.bind(effect),
    instance && instance.suspense
  )
}

其余情况都是立即执行副作用函数。如下面的代码所示：

else {
  // 其余情况立即首次执行副作用
  effect.run()
}

返回匿名函数，停止侦听

最终，doWatch函数返回了一个匿名函数，该函数用于取消对数据源的监听。因此在调用 watch 或者 watchEffect 时，可以调用其返回值类结束侦听。

return () => {
  effect.stop()
  if (instance && instance.scope) {
    // 返回一个函数，用以显式的结束侦听
    remove(instance.scope.effects!, effect)
  }
}

위 내용은 Vue3 Listener Watch의 구현 원리는 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!