Vue3中的computed,watch,watchEffect如何使用

Vue3中的computed, watch, watchEffect如何使用

在Vue3中，computed、watch和watchEffect是三個非常重要的響應式API，它們可以幫助我們更好地管理和響應數據的變化。本文將詳細介紹這三個API的使用方法和區別。

1. computed

computed用于創建一個計算屬性，它會根據依賴的響應式數據自動更新。計算屬性是基于它們的依賴進行緩存的，只有在依賴發生變化時才會重新計算。

基本用法

import { ref, computed } from 'vue';

const count = ref(0);
const doubleCount = computed(() => count.value * 2);

console.log(doubleCount.value); // 0

count.value = 1;
console.log(doubleCount.value); // 2

計算屬性的setter

計算屬性默認是只讀的，但你可以通過提供一個setter來使其可寫。

const count = ref(0);
const doubleCount = computed({
  get: () => count.value * 2,
  set: (newValue) => {
    count.value = newValue / 2;
  }
});

doubleCount.value = 4;
console.log(count.value); // 2

2. watch

watch用于監聽一個或多個響應式數據的變化，并在變化時執行回調函數。watch可以監聽ref、reactive對象、計算屬性等。

基本用法

import { ref, watch } from 'vue';

const count = ref(0);

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

count.value = 1; // 輸出: count changed from 0 to 1

監聽多個數據源

你可以通過傳遞一個數組來監聽多個數據源。

const count1 = ref(0);
const count2 = ref(0);

watch([count1, count2], ([newCount1, newCount2], [oldCount1, oldCount2]) => {
  console.log(`count1 changed from ${oldCount1} to ${newCount1}`);
  console.log(`count2 changed from ${oldCount2} to ${newCount2}`);
});

count1.value = 1; // 輸出: count1 changed from 0 to 1
count2.value = 2; // 輸出: count2 changed from 0 to 2

深度監聽

默認情況下，watch是淺層監聽的，如果你需要監聽對象內部的變化，可以使用deep選項。

const state = reactive({ count: 0 });

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

state.count = 1; // 輸出: state changed { count: 1 }

3. watchEffect

watchEffect是一個立即執行的監聽器，它會自動追蹤其內部使用的響應式數據，并在這些數據變化時重新執行。

基本用法

import { ref, watchEffect } from 'vue';

const count = ref(0);

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

count.value = 1; // 輸出: count is 1

停止監聽

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

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

count.value = 1; // 輸出: count is 1

stop();

count.value = 2; // 不會輸出

清理副作用

watchEffect的回調函數可以接收一個onInvalidate函數，用于清理副作用。

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

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

count.value = 1; // 1秒后輸出: count is 1
count.value = 2; // 1秒后輸出: count is 2

總結

• computed：用于創建計算屬性，適合處理依賴其他數據的派生數據。
• watch：用于監聽數據的變化，適合在數據變化時執行復雜的邏輯。
• watchEffect：自動追蹤依賴并立即執行，適合處理不需要顯式指定依賴的場景。

根據不同的需求，選擇合適的API可以幫助你更高效地管理Vue應用中的響應式數據。