Vue3中如何檢測數(shù)組的變化方式

更新時間：2024年06月07日 08:44:16 作者：小新-alive

這篇文章主要介紹了Vue3中如何檢測數(shù)組的變化方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

watch和watchEffect

Vue 3中，watch和watchEffect函數(shù)是用于監(jiān)聽數(shù)據(jù)變化的功能。

1. watch

watch函數(shù)是一個選項(xiàng)，可以在組件的選項(xiàng)中使用。
它接收兩個參數(shù)：要監(jiān)聽的數(shù)據(jù)表達(dá)式或計(jì)算屬性，以及回調(diào)函數(shù)。
當(dāng)監(jiān)聽的數(shù)據(jù)發(fā)生變化時，回調(diào)函數(shù)會被觸發(fā)執(zhí)行。
回調(diào)函數(shù)接收兩個參數(shù)：新值（變化后的值）和舊值（變化前的值）。
可以使用watch函數(shù)來監(jiān)聽簡單的數(shù)據(jù)變化，以及需要精確控制監(jiān)聽行為的情況。
watch函數(shù)還支持配置選項(xiàng)，如deep用于深度監(jiān)聽對象或數(shù)組的變化，immediate用于在初始化時立即執(zhí)行回調(diào)函數(shù)等。

示例代碼：

import { watch } from 'vue';

watch(
  () => myArray, // 監(jiān)聽的數(shù)組
  (newArray, oldArray) => {
    // 數(shù)組發(fā)生變化時的回調(diào)函數(shù)
    console.log('數(shù)組變化了', newArray, oldArray);
  }
);

在上面的代碼中，我們使用watch函數(shù)來監(jiān)聽myArray數(shù)組的變化。

當(dāng)數(shù)組發(fā)生變化時，回調(diào)函數(shù)將被執(zhí)行。

2. watchEffect

watchEffect函數(shù)是一個響應(yīng)式副作用函數(shù)，可以在組件的代碼塊中使用。
它接收一個函數(shù)作為參數(shù)，該函數(shù)內(nèi)部可以使用響應(yīng)式數(shù)據(jù)。
當(dāng)響應(yīng)式數(shù)據(jù)變化時，函數(shù)會被自動觸發(fā)執(zhí)行。
watchEffect函數(shù)會自動追蹤函數(shù)內(nèi)部使用的響應(yīng)式數(shù)據(jù)，并在其變化時重新執(zhí)行函數(shù)。
這意味著你無需顯式指定要監(jiān)聽的數(shù)據(jù)，而是讓Vue自動追蹤依賴關(guān)系。
watchEffect函數(shù)適用于需要自動追蹤多個響應(yīng)式數(shù)據(jù)變化的情況，以及需要處理副作用操作的場景。

示例代碼：

import { watchEffect } from 'vue';

watchEffect(() => {
  console.log('數(shù)組變化了', myArray);
});

在上面的代碼中，我們使用watchEffect函數(shù)來監(jiān)聽myArray數(shù)組的變化。

一旦數(shù)組發(fā)生變化，回調(diào)函數(shù)將被執(zhí)行。

3. 區(qū)別

3.1 監(jiān)聽的方式

watch選項(xiàng)：watch選項(xiàng)需要在組件的選項(xiàng)中定義，并接收兩個參數(shù)：要監(jiān)聽的數(shù)據(jù)表達(dá)式和回調(diào)函數(shù)。它可以監(jiān)聽指定的數(shù)據(jù)或計(jì)算屬性，并在其變化時執(zhí)行回調(diào)函數(shù)。
watchEffect函數(shù)：watchEffect函數(shù)可以在組件的代碼塊中直接使用，并接收一個函數(shù)作為參數(shù)。它會自動追蹤函數(shù)內(nèi)部使用的響應(yīng)式數(shù)據(jù)，并在其變化時執(zhí)行函數(shù)。

3.2 追蹤依賴

watch選項(xiàng)：watch選項(xiàng)需要明確指定要監(jiān)聽的數(shù)據(jù)表達(dá)式，只有該表達(dá)式變化時才會觸發(fā)回調(diào)函數(shù)。如果需要監(jiān)聽多個數(shù)據(jù)，可以使用包含這些數(shù)據(jù)的計(jì)算屬性。
watchEffect函數(shù)：watchEffect函數(shù)會自動追蹤函數(shù)內(nèi)部使用的響應(yīng)式數(shù)據(jù)，并在任何這些數(shù)據(jù)變化時觸發(fā)函數(shù)。它會自動收集依賴，并在依賴發(fā)生變化時重新運(yùn)行函數(shù)。

3.3 調(diào)用時機(jī)

watch選項(xiàng)：watch選項(xiàng)在初始化時會立即執(zhí)行一次回調(diào)函數(shù)，并在監(jiān)聽的數(shù)據(jù)發(fā)生變化時再次執(zhí)行回調(diào)函數(shù)。
watchEffect函數(shù)：watchEffect函數(shù)在組件渲染時會立即執(zhí)行一次函數(shù)，并在其內(nèi)部使用的響應(yīng)式數(shù)據(jù)發(fā)生變化時再次執(zhí)行函數(shù)。