Vue3偵聽器watch的實現原理是什么

這篇文章主要介紹“Vue3偵聽器watch的實現原理是什么”，在日常操作中，相信很多人在Vue3偵聽器watch的實現原理是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”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 的函數簽名基本一致，也是接收三個參數。在 doWatch 函數中，為了便于options 選項的使用，對 options 進行了解構。

初始化變量

首先從 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 函數。否則就執行 cleanup 清除依賴，然后執行 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 屬性

根據是否傳入回調函數cb，設置 job 函數的 allowRecurse 屬性。這個設置十分重要，它能夠讓 job 作為偵聽器的回調，這樣調度器就能知道它允許調用自身。

// 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的實現原理是什么”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！