watch和watchEffect

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

1. watch

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

示例代碼：

import { watch } from 'vue';

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

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

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

2. watchEffect

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

示例代碼：

import { watchEffect } from 'vue';

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

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

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

3. 區(qū)別

3.1 監(jiān)聽的方式

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

3.2 追蹤依賴

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

3.3 調用時機

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

3.4 返回值

• watch選項：watch選項的回調函數(shù)可以返回一個清理函數(shù)，用于在不需要監(jiān)聽時進行清理操作。
• watchEffect函數(shù)：watchEffect函數(shù)沒有返回值，且無法手動停止追蹤和清理。

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論