vue3中的watch和watchEffect如何用

Vue3中的watch和watchEffect如何用

在Vue3中，watch和watchEffect是兩個非常重要的響應式API，它們用于監聽數據的變化并執行相應的操作。本文將詳細介紹這兩個API的使用方法、區別以及在實際開發中的應用場景。

1. watch的基本用法

watch用于監聽一個或多個響應式數據的變化，并在數據變化時執行回調函數。它的基本語法如下：

import { watch, ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watch(count, (newValue, oldValue) => {
      console.log(`count changed from ${oldValue} to ${newValue}`);
    });

    return {
      count,
    };
  },
};

1.1 監聽多個數據源

watch可以同時監聽多個數據源，只需將數據源放在一個數組中即可：

import { watch, ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const name = ref('Vue');

    watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
      console.log(`count changed from ${oldCount} to ${newCount}`);
      console.log(`name changed from ${oldName} to ${newName}`);
    });

    return {
      count,
      name,
    };
  },
};

1.2 深度監聽

默認情況下，watch是淺層監聽的，即它只會監聽數據的第一層變化。如果要監聽對象或數組內部的變化，可以使用deep選項：

import { watch, ref } from 'vue';

export default {
  setup() {
    const user = ref({
      name: 'Vue',
      age: 3,
    });

    watch(
      user,
      (newValue, oldValue) => {
        console.log('user changed', newValue);
      },
      { deep: true }
    );

    return {
      user,
    };
  },
};

1.3 立即執行回調

默認情況下，watch的回調函數只有在監聽的數據發生變化時才會執行。如果希望在組件初始化時立即執行一次回調函數，可以使用immediate選項：

import { watch, ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watch(
      count,
      (newValue, oldValue) => {
        console.log(`count changed from ${oldValue} to ${newValue}`);
      },
      { immediate: true }
    );

    return {
      count,
    };
  },
};

2. watchEffect的基本用法

watchEffect是Vue3中引入的一個新的API，它會在組件初始化時立即執行一次，并在其依賴的響應式數據發生變化時重新執行。它的基本語法如下：

import { watchEffect, ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watchEffect(() => {
      console.log(`count is ${count.value}`);
    });

    return {
      count,
    };
  },
};

2.1 自動追蹤依賴

watchEffect的一個顯著特點是它會自動追蹤其內部使用的響應式數據，并在這些數據發生變化時重新執行。這意味著你不需要顯式地指定要監聽的數據源，watchEffect會自動處理這些依賴。

import { watchEffect, ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const name = ref('Vue');

    watchEffect(() => {
      console.log(`count is ${count.value}, name is ${name.value}`);
    });

    return {
      count,
      name,
    };
  },
};

2.2 停止監聽

watchEffect返回一個停止監聽的函數，你可以在需要時調用這個函數來停止監聽：

import { watchEffect, ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const stop = watchEffect(() => {
      console.log(`count is ${count.value}`);
    });

    // 停止監聽
    stop();

    return {
      count,
    };
  },
};

2.3 清理副作用

watchEffect的回調函數可以返回一個清理函數，這個清理函數會在watchEffect重新執行之前被調用，或者在watchEffect停止監聽時被調用。這個特性非常適合用于清理一些副作用，比如取消網絡請求、清除定時器等。

import { watchEffect, ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watchEffect((onInvalidate) => {
      const timer = setTimeout(() => {
        console.log(`count is ${count.value}`);
      }, 1000);

      onInvalidate(() => {
        clearTimeout(timer);
      });
    });

    return {
      count,
    };
  },
};

3. watch與watchEffect的區別

雖然watch和watchEffect都可以用于監聽響應式數據的變化，但它們在使用場景和功能上有一些區別：

3.1 依賴追蹤

• watch需要顯式地指定要監聽的數據源，并且只有在這些數據源發生變化時才會執行回調函數。
• watchEffect會自動追蹤其內部使用的響應式數據，并在這些數據發生變化時重新執行。

3.2 執行時機

• watch的回調函數只有在監聽的數據發生變化時才會執行，除非使用了immediate選項。
• watchEffect在組件初始化時會立即執行一次，并在其依賴的響應式數據發生變化時重新執行。

3.3 回調函數的參數

• watch的回調函數會接收兩個參數：新值和舊值。
• watchEffect的回調函數沒有參數，因為它會自動追蹤依賴并重新執行。

3.4 清理副作用

• watch不支持清理副作用的功能。
• watchEffect可以通過返回一個清理函數來處理副作用。

4. 實際應用場景

4.1 使用watch的場景

• 需要監聽特定數據的變化：當你只需要監聽某個特定的響應式數據時，watch是一個更好的選擇，因為它可以精確地控制監聽的數據源。
• 需要獲取舊值：如果你需要在數據變化時獲取舊值，watch是唯一的選擇，因為watchEffect不會提供舊值。

4.2 使用watchEffect的場景

• 自動追蹤依賴：當你需要監聽多個響應式數據，并且這些數據可能會頻繁變化時，watchEffect可以自動追蹤依賴，減少手動維護的工作量。
• 立即執行：如果你希望在組件初始化時立即執行一次邏輯，并且在這些邏輯依賴的數據發生變化時重新執行，watchEffect是一個更好的選擇。
• 清理副作用：如果你需要在監聽停止時清理一些副作用，比如取消網絡請求或清除定時器，watchEffect的清理函數功能非常有用。

5. 總結

watch和watchEffect是Vue3中兩個非常重要的響應式API，它們分別適用于不同的場景。watch更適合用于監聽特定數據的變化，并且可以獲取舊值；而watchEffect則更適合用于自動追蹤依賴、立即執行邏輯以及清理副作用。

在實際開發中，你可以根據具體的需求選擇合適的API。如果你需要精確控制監聽的數據源，并且需要獲取舊值，那么watch是更好的選擇；如果你希望自動追蹤依賴，并且需要立即執行邏輯或清理副作用，那么watchEffect是更好的選擇。

通過合理地使用watch和watchEffect，你可以更高效地處理Vue3中的響應式數據變化，提升應用的性能和可維護性。