在 Vue 3 中，watchEffect 是一個(gè)用于監(jiān)聽響應(yīng)式數(shù)據(jù)變化的 API。它可以在函數(shù)內(nèi)部自動(dòng)跟蹤數(shù)據(jù)的依賴，并在依賴變化時(shí)重新運(yùn)行函數(shù)。

watchEffect?的作用以及各個(gè)參數(shù)的功能講解：

watchEffect(effect: (onInvalidate: InvalidateCbRegistrator) => void | (() => void) | Promise<void>, options?: WatchEffectOptions): WatchStopHandle

• • effect：要監(jiān)聽的響應(yīng)式數(shù)據(jù)以及需要執(zhí)行的副作用函數(shù)。effect 函數(shù)接收一個(gè) onInvalidate 回調(diào)函數(shù)作為參數(shù)，用于在 effect 的依賴發(fā)生變化時(shí)執(zhí)行清理函數(shù)。effect 函數(shù)可以返回一個(gè)清理函數(shù)，也可以返回一個(gè) Promise，Promise 完成時(shí)執(zhí)行的函數(shù)也會被視為清理函數(shù)。如果 effect 函數(shù)中使用的數(shù)據(jù)沒有在響應(yīng)式對象中被引用，那么 watchEffect 不會監(jiān)聽到這些數(shù)據(jù)的變化。
  • options：監(jiān)聽選項(xiàng)對象，可選。可以用來配置監(jiān)聽的行為，例如 deep、flush 等選項(xiàng)。具體的選項(xiàng)請參考下面的講解。
  • 返回值：一個(gè)函數(shù)，調(diào)用它可以停止監(jiān)聽。

WatchEffectOptions

　　　　watchEffect 函數(shù)接受一個(gè)可選的選項(xiàng)對象，用于配置監(jiān)聽行為。以下是 WatchEffectOptions 對象的屬性及其功能：

• • lazy：是否延遲執(zhí)行 effect 函數(shù)。如果設(shè)置為 true，則在首次調(diào)用 watchEffect 時(shí)不會執(zhí)行 effect 函數(shù)，只有在其依賴發(fā)生變化時(shí)才會執(zhí)行。默認(rèn)為 false。
  • deep：是否深度監(jiān)聽對象和數(shù)組的變化，默認(rèn)為 false。如果設(shè)置為 true，則會遞歸監(jiān)聽對象和數(shù)組中的所有屬性。
  • flush：何時(shí)執(zhí)行回調(diào)函數(shù)。默認(rèn)為 'pre'，表示在響應(yīng)式數(shù)據(jù)變化后立即執(zhí)行回調(diào)函數(shù)，但在同一事件循環(huán)中的其他變化不會觸發(fā)回調(diào)函數(shù)。如果設(shè)置為 'post'，則會在同一事件循環(huán)中的所有變化都發(fā)生后執(zhí)行回調(diào)函數(shù)。

例如，以下代碼使用 watchEffect 監(jiān)聽 message 的變化，并在變化時(shí)執(zhí)行回調(diào)函數(shù)。

import { watchEffect } from 'vue';

watchEffect(() => {
  console.log(`message 變?yōu)?${message}`);
});

?

下面是一個(gè)簡單的例子，演示了如何使用 watchEffect 監(jiān)聽響應(yīng)式數(shù)據(jù)變化：

<template>
  <div>
    <p>輸入框的值為：{{ message }}</p>
    <input v-model="message" />
  </div>
</template>

<script>
import { defineComponent, ref, watchEffect } from 'vue';

export default defineComponent({
  setup() {
    const message = ref('');

    watchEffect(() => {
      console.log(`message 值改變?yōu)椋?{message.value}`);
    });

    return {
      message
    };
  }
});
</script>

在這個(gè)例子中，我們使用 ref 函數(shù)定義了一個(gè)名為 message 的響應(yīng)式數(shù)據(jù)，并將其初始化為空字符串。我們使用 watchEffect 函數(shù)監(jiān)聽 message 的變化，并在函數(shù)內(nèi)部打印出 message 的值。因?yàn)?watchEffect 函數(shù)會自動(dòng)跟蹤 message 的依賴，所以當(dāng)用戶在輸入框中輸入內(nèi)容時(shí)，watchEffect 函數(shù)就會重新運(yùn)行，打印出新的 message 值。

需要注意的是，watchEffect 函數(shù)的回調(diào)函數(shù)不需要顯式地指定依賴項(xiàng)，它會自動(dòng)跟蹤回調(diào)函數(shù)內(nèi)部使用到的所有響應(yīng)式數(shù)據(jù)。因此，當(dāng)你使用 watchEffect 函數(shù)時(shí)，不需要再使用 watch 函數(shù)或 computed 函數(shù)來監(jiān)聽數(shù)據(jù)變化。但是，如果你需要監(jiān)聽某個(gè)特定的響應(yīng)式數(shù)據(jù)變化，可以在回調(diào)函數(shù)中使用該數(shù)據(jù)，這樣 watchEffect 就會自動(dòng)跟蹤它。

watchEffect 函數(shù)的返回值是一個(gè)用于停止監(jiān)聽的函數(shù)。當(dāng)你調(diào)用這個(gè)函數(shù)時(shí)，watchEffect 就會停止監(jiān)聽響應(yīng)式數(shù)據(jù)的變化。

以下是一個(gè)示例，演示如何使用 watchEffect 函數(shù)的返回值停止監(jiān)聽：

<template>
  <div>
    <p>輸入框的值為：{{ message }}</p>
    <button @click="stopWatching">停止監(jiān)聽</button>
    <input v-model="message" />
  </div>
</template>

<script>
import { defineComponent, ref, watchEffect } from 'vue';

export default defineComponent({
  setup() {
    const message = ref('');

    const stopWatching = watchEffect(() => {
      console.log(`message 值改變?yōu)椋?{message.value}`);
    });

    function stopWatching() {
      stopWatching();
    }

    return {
      message,
      stopWatching
    };
  }
});
</script>

在這個(gè)例子中，我們定義了一個(gè)名為 stopWatching 的函數(shù)，它調(diào)用了 watchEffect 函數(shù)的返回值，從而停止了監(jiān)聽。我們在模板中添加了一個(gè)按鈕，當(dāng)用戶點(diǎn)擊它時(shí)，就會調(diào)用 stopWatching 函數(shù)，從而停止監(jiān)聽 message 的變化。

?

?

watch的作用以及各個(gè)參數(shù)的功能講解：

watch 是 Vue 3 中用于監(jiān)聽響應(yīng)式數(shù)據(jù)變化的 API，它能夠在響應(yīng)式數(shù)據(jù)發(fā)生變化時(shí)執(zhí)行回調(diào)函數(shù)。以下是 watch 函數(shù)的參數(shù)及其功能：

1. watch(source: string | Function | Ref, callback: Function, options?: WatchOptions): WatchStopHandle

• source：要監(jiān)聽的響應(yīng)式數(shù)據(jù)，可以是一個(gè)字符串（表示要監(jiān)聽的數(shù)據(jù)在組件實(shí)例中的屬性名）、一個(gè)函數(shù)（返回要監(jiān)聽的數(shù)據(jù)）或一個(gè) ref 對象。
• callback：響應(yīng)式數(shù)據(jù)變化時(shí)要執(zhí)行的回調(diào)函數(shù)?；卣{(diào)函數(shù)接收兩個(gè)參數(shù)：新值和舊值。
• options：監(jiān)聽選項(xiàng)對象，可選?？梢杂脕砼渲帽O(jiān)聽的行為，例如 deep、immediate 等選項(xiàng)。具體的選項(xiàng)請參考下面的講解。
• 返回值：一個(gè)函數(shù)，調(diào)用它可以停止監(jiān)聽。

2. WatchOptions

watch 函數(shù)接受一個(gè)可選的選項(xiàng)對象，用于配置監(jiān)聽行為。以下是 WatchOptions 對象的屬性及其功能：

• immediate：是否在監(jiān)聽開始時(shí)立即執(zhí)行回調(diào)函數(shù)，默認(rèn)為 false。
• deep：是否深度監(jiān)聽對象和數(shù)組的變化，默認(rèn)為 false。如果設(shè)置為 true，則會遞歸監(jiān)聽對象和數(shù)組中的所有屬性。
• flush：何時(shí)執(zhí)行回調(diào)函數(shù)。默認(rèn)為 'pre'，表示在響應(yīng)式數(shù)據(jù)變化后立即執(zhí)行回調(diào)函數(shù)，但在同一事件循環(huán)中的其他變化不會觸發(fā)回調(diào)函數(shù)。如果設(shè)置為 'post'，則會在同一事件循環(huán)中的所有變化都發(fā)生后執(zhí)行回調(diào)函數(shù)。
• onTrack：監(jiān)視屬性被訪問的函數(shù)。它接收一個(gè)追蹤對象（TrackOpTypes）和追蹤的目標(biāo)對象（target）?？梢杂盟鼇磉M(jìn)行依賴追蹤分析等操作。
• onTrigger：監(jiān)視屬性被修改的函數(shù)。它接收一個(gè)觸發(fā)對象（TriggerOpTypes）和觸發(fā)的目標(biāo)對象（target）?？梢杂盟鼇磉M(jìn)行調(diào)試、性能分析等操作。

• 例如，以下代碼監(jiān)聽 message 的變化，并在變化時(shí)執(zhí)行回調(diào)函數(shù)，同時(shí)設(shè)置 immediate 選項(xiàng)為 true，表示在組件掛載時(shí)立即執(zhí)行一次回調(diào)函數(shù)。

import { watch } from 'vue';

watch(
  () => message, // 要監(jiān)聽的響應(yīng)式數(shù)據(jù)
  (newValue, oldValue) => {
    console.log(`message 從 ${oldValue} 變?yōu)?${newValue}`);
  },
  {
    immediate: true // 在組件掛載時(shí)立即執(zhí)行回調(diào)函數(shù)
  }
);

?

watchEffect 和 watch 都是 Vue 3 中用于監(jiān)聽響應(yīng)式數(shù)據(jù)變化的 API，它們之間的主要區(qū)別在于回調(diào)函數(shù)的類型和依賴項(xiàng)的聲明方式。

• watchEffect 接收一個(gè)不帶參數(shù)的函數(shù)作為回調(diào)函數(shù)，在函數(shù)內(nèi)部使用到的響應(yīng)式數(shù)據(jù)變化時(shí)會自動(dòng)觸發(fā)回調(diào)函數(shù)。watchEffect 會自動(dòng)追蹤響應(yīng)式數(shù)據(jù)的變化，并在每次變化時(shí)重新運(yùn)行回調(diào)函數(shù)。
• watch 接收兩個(gè)參數(shù)：第一個(gè)參數(shù)是要監(jiān)聽的響應(yīng)式數(shù)據(jù)，第二個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)?；卣{(diào)函數(shù)接收兩個(gè)參數(shù)：新值和舊值。在響應(yīng)式數(shù)據(jù)變化時(shí)，watch 會調(diào)用回調(diào)函數(shù)，并傳入新值和舊值?？梢酝ㄟ^第三個(gè)參數(shù)來聲明要監(jiān)聽的選項(xiàng)，例如 deep、immediate 等。

因?yàn)?watchEffect 自動(dòng)追蹤響應(yīng)式數(shù)據(jù)的變化，所以它更適合處理簡單的數(shù)據(jù)邏輯。如果需要監(jiān)聽特定的響應(yīng)式數(shù)據(jù)或使用更高級的選項(xiàng)，可以使用 watch 函數(shù)。使用 watch 函數(shù)需要顯式聲明要監(jiān)聽的響應(yīng)式數(shù)據(jù)，這可以使代碼更具可讀性。此外，watch 函數(shù)還支持聲明多個(gè)要監(jiān)聽的響應(yīng)式數(shù)據(jù)，這使得它可以處理更復(fù)雜的數(shù)據(jù)邏輯。

總之，如果你只需要監(jiān)聽一些簡單的響應(yīng)式數(shù)據(jù)變化，可以使用 watchEffect 函數(shù)。如果需要監(jiān)聽特定的響應(yīng)式數(shù)據(jù)或使用更高級的選項(xiàng)，可以使用 watch 函數(shù)。

以下是一個(gè)示例，演示 watchEffect 和 watch 的差別：

<template>
  <div>
    <p>message1 值為：{{ message1 }}</p>
    <p>message2 值為：{{ message2 }}</p>
    <button @click="increment">增加 message1 和 message2 的值</button>
  </div>
</template>

<script>
import { defineComponent, ref, watchEffect, watch } from 'vue';

export default defineComponent({
  setup() {
    const message1 = ref(0);
    const message2 = ref(0);

    // watchEffect 自動(dòng)追蹤響應(yīng)式數(shù)據(jù)的變化
    watchEffect(() => {
      console.log(`message1 值變?yōu)?${message1.value}`);
    });

    // watch 需要顯式聲明要監(jiān)聽的響應(yīng)式數(shù)據(jù)
    watch(message2, (newValue, oldValue) => {
      console.log(`message2 從 ${oldValue} 變?yōu)?${newValue}`);
    });

    function increment() {
      message1.value++;
      message2.value++;
    }

    return {
      message1,
      message2,
      increment
    };
  }
});
</script>

在這個(gè)例子中，我們聲明了兩個(gè)響應(yīng)式數(shù)據(jù) message1 和 message2，并分別使用了 watchEffect 和 watch 監(jiān)聽它們的變化。watchEffect 自動(dòng)追蹤 message1 的變化，并在變化時(shí)觸發(fā)回調(diào)函數(shù)。而 watch 則需要顯式聲明要監(jiān)聽的 message2，并在它的變化時(shí)觸發(fā)回調(diào)函數(shù)。在點(diǎn)擊按鈕時(shí)，我們同時(shí)增加了 message1 和 message2 的值，從而觸發(fā)了相應(yīng)的回調(diào)函數(shù)。

watchEffect 和 watch 的區(qū)別在于，watchEffect 監(jiān)聽的是一個(gè)函數(shù)的副作用，而 watch 監(jiān)聽的是一個(gè)具體的響應(yīng)式數(shù)據(jù)，因此 watchEffect 不需要顯式指定監(jiān)聽的數(shù)據(jù)，它會自動(dòng)檢測 effect 函數(shù)中使用的響應(yīng)式數(shù)據(jù)，并在其發(fā)生變化時(shí)執(zhí)行回調(diào)函數(shù)。此外，watchEffect 也不需要手動(dòng)停止監(jiān)聽，它會在組件卸載時(shí)自動(dòng)停止監(jiān)聽。但是，watchEffect 不支持監(jiān)聽選項(xiàng)對象中的 immediate、onTrack 和 onTrigger 屬性。

?

?

如果watch的監(jiān)聽對象是數(shù)組:

如果 watch 監(jiān)聽的是一個(gè)數(shù)組，則可以使用 deep 選項(xiàng)來深度監(jiān)聽數(shù)組元素的變化。當(dāng) deep 為 true 時(shí)，watch 會遞歸監(jiān)聽數(shù)組中每個(gè)元素的變化。

例如，以下代碼使用 watch 監(jiān)聽 list 數(shù)組的變化，并在變化時(shí)執(zhí)行回調(diào)函數(shù)。

import { watch } from 'vue';

watch(
  () => list,
  (newList, oldList) => {
    console.log('list 變化了', newList, oldList);
  },
  { deep: true }
);

到了這里，關(guān)于vue全家桶進(jìn)階之路32：Vue3 WatchEffect和watch 監(jiān)聽的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！