Vue3偵聽器watch的實作原理是什麼

watch 的本質

所謂的watch，其本質就是觀測一個響應式數據，當數據發生變化時通知並執行相應的回調函數。實際上，watch 的實現本質就是利用了 effect 和 options.scheduler 選項。如下範例所示：

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

如程式碼所示，source 是響應式數據，而 cb 則是回呼函數。如果副作用函數中存在 scheduler 選項，當響應式資料變更時，會觸發 scheduler 函數執行，而不是直接觸發副作用函數執行。從這個角度來看， scheduler 調度函數就等於是一個回呼函數，而 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 回呼函數，options 偵聽選項。

source 參數

從watch的函數重載中可以知道，當偵聽的是單一來源時，source 可以是ref 類型的資料或是具有傳回值的getter 函數，也可以是一個響應式的obj 物件。當偵聽的是多個來源時，source 可以是陣列。

cb 參數

在 cb 回呼函數中，給開發者提供了最新的value，舊的value以及onCleanup函數用與清除副作用。如下面的類型定義所示：

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

options 參數

options 選項可以控制watch 的行為，例如透過options的選項參數immediate來控制watch的回呼是否立即執行，透過options的選項參數來控制watch的回呼函數是同步執行還是非同步執行。 options 參數的類型定義如下：

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

可以看到 options 的類型定義 WatchOptions 繼承了 WatchOptionsBase。也就是說，watch 的 options 中除了 immediate 和 deep 這兩個特有的參數外，還可以傳遞 WatchOptionsBase 中的所有參數以控制副作用執行的行為。

在 watch 的函數體中呼叫了 doWatch 函數，我們來看看它的實作。

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 的函式簽章基本上一致，也是接收三個參數。為了方便使用 options 選項，doWatch函數對其進行了解構操作。

初始化變數

首先，透過 component 取得目前元件實例，接著宣告三個不同的變數。其中一個函數叫做 getter，它會作為副作用函數的參數傳遞進去。此變數 forceTrigger 是一個布林值，用於指示是否需要強制執行副作用函數。 isMultiSource 變數同樣也是布林值，用來標記偵聽的資料來源是單一來源還是以陣列形式傳入的多個來源，初始值為 false，表示偵聽的是單一來源。如下面的程式碼所示：

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

偵聽的資料來源是一個回應式資料

當偵聽的資料來源是回應式資料時，直接傳回source 來初始化getter ，也就是getter 函數被觸發時直接傳回偵聽的資料來源。由於響應式資料中可能會是一個object 對象，因此將 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偵聽器watch的實作原理是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！