p"/> p">

首頁  >  文章  >  web前端  >  Vue3中怎麼使用watch監聽物件的屬性值

Vue3中怎麼使用watch監聽物件的屬性值

WBOY
WBOY轉載
2023-06-03 13:09:345180瀏覽

Vue3 中使用watch 偵聽物件中的具體屬性

1.前言

<script lang="ts" setup>
	// 接受父组件传递的数据
    const props = defineProps({
        test: {
            type: String,
            default: &#39;&#39;
        }
    })
    
    // 使用 watch 侦听 props 中的 test 属性
    watch(
        // 这种写法不会侦听到 props 中 test 的变化
    	props.test,
        () => {
            console.log("侦听成功")
        }
    )
    
    watch(
    	// 这种写法会侦听到 props 中 test 的变化
        () => props.test,
        () => {
            console.log("侦听成功")
        }
    )
</script>

watch 的基本用法

watch () 預設是懶偵聽的,即僅在偵聽來源發生變更時才執行回呼函數

第一個參數:偵聽來源,偵聽源可以是一下幾個

一個函數,傳回一個值一個ref一個響應式物件(reactive)或是由以上類型的值所組成的陣列

第二個參數:偵聽來源發生變化時要觸發的回調函數。

(newValue, oldValue) => { /* code */}

#當偵聽多個來源時,回呼函數接受兩個數組,分別對應來源數組中的新值和舊值

( [ newValue1, newValue2 ] , [ oldValue1 , oldValue2 ]) => {/* code */}

第三個參數:可選對象,可以支援一下這些選項

immediate:偵聽器創建時立即觸發回調deep:如果來源是一個對象,會強制深度遍歷,以便在深層發生變化時觸發回調函數flush:調整回調函數的刷新時機onTrack / onTrigger:偵錯偵聽器的依賴

2. 原因

因為watch的偵聽來源只能是上面的4中情況

const obj = reactive({ count: 0 })

// 错误,因为 watch() 中的侦听源是一个 number,最终 source 返回的 getter 函数是一个空,所以就得不到侦听的数据
watch(obj.count, (count) => {
  console.log(`count is: ${count}`)
})

// 正确,主要思想是,将侦听源转化为以上4种类型(转化为getter函数是最简单方便的)
watch(
  () => obj.count,
  (count) => {
    console.log(`count is: ${count}`)
  }
)

3. watch原始碼分析

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接收三個參數:source偵聽來源、cb回呼函數、 options偵聽配置,最後會回傳一個doWatch

#4.doWatch原始碼分析

function doWatch(
  source: WatchSource | WatchSource[] | WatchEffect | object,
  cb: WatchCallback | null,
  { immediate, deep, flush, onTrack, onTrigger }: WatchOptions = EMPTY_OBJ
): WatchStopHandle {
  // ...
// 当前组件实例
const instance = currentInstance
// 副作用函数,在初始化effect时使用
let getter: () => any
// 强制触发侦听
let forceTrigger = false
// 是否为多数据源。
let isMultiSource = false
}

doWatch#依然接受三個參數:source偵聽來源、cb回呼函數、options偵聽設定

這裡著重對偵聽來源的原始碼進行分析(source標準化

  • 如果sourceref類型,getter是個回傳source.value的函數,forceTrigger取決於source是否是淺層響應式。

if (isRef(source)) {
  getter = () => source.value
  forceTrigger = isShallow(source)
}
  • 如果sourcereactive類型,getter是個回傳source 的函數,並將deep設為true。當直接偵聽一個響應式物件時,偵聽器會自動啟用深層模式

if (isReactive(source)) {
  getter = () => source
  deep = true
}

範例

<template>
  <div class="container">
    <h3>obj---{{ obj }}</h3>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>

<script lang="ts" setup>
import { reactive, watch } from "vue";
const obj = reactive({
  name: "张三",
  age: 18,
});
const changeName = () => {
  obj.name += "++";
};
const changeAge = () => {
  obj.age += 1;
};
// obj 中的任一属性变化了,都会被监听到
watch(obj, () => {
  console.log("变化了");
});
</script>
  • #如果source 是個數組,將isMultiSource設為trueforceTrigger取決於source是否有reactive類型的數據,getter函數中會遍歷source#,針對不同類型的source做不同處理。

if (isArray(source)) {
  isMultiSource = true
  forceTrigger = source.some(isReactive)
  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)
      }
    })
}
  • 如果source是個function。在存在cb的情況下,getter函數中會執行source,這裡source會透過callWithErrorHandling函數執行,在callWithErrorHandling中會處理source執行過程中出現的錯誤;不存在cb的話,在getter#中,如果元件已經被卸載了,直接return,否則判斷cleanupcleanup是在watchEffect中透過onCleanup註冊的清理函數),如果存在cleanup執行cleanup,接著執行source,並傳回執行結果。 source會被callWithAsyncErrorHandling包裝,該函數作用會處理source執行過程中出現的錯誤,與callWithErrorHandling#不同的是,callWithAsyncErrorHandling會處理非同步錯誤。

if (isFunction(source)) {
  if (cb) {
    getter = () =>
      callWithErrorHandling(source, instance, ErrorCodes.WATCH_GETTER)
  } else {
    // watchEffect
    getter = () => {
      // 如果组件实例已经卸载,直接return
      if (instance && instance.isUnmounted) {
        return
      }
      // 如果清理函数,则执行清理函数
      if (cleanup) {
        cleanup()
      }
      // 执行source,传入onCleanup,用来注册清理函数
      return callWithAsyncErrorHandling(
        source,
        instance,
        ErrorCodes.WATCH_CALLBACK,
        [onCleanup]
      )
    }
  }
}
  • 其他情況getter會被賦值為一個空函數

getter = NOOP
__DEV__ && warnInvalidSource(source)

以上是Vue3中怎麼使用watch監聽物件的屬性值的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:yisu.com。如有侵權,請聯絡admin@php.cn刪除