在 Vue 3 中，watchEffect 是一個用於監聽響應式數據變化的 API。它可以在函數內部自動跟蹤數據的依賴，併在依賴變化時重新運行函數。 watchEffect 的作用以及各個參數的功能講解： watchEffect(effect: (onInvalidate: InvalidateCb ...
在 Vue 3 中，watchEffect 是一個用於監聽響應式數據變化的 API。它可以在函數內部自動跟蹤數據的依賴，併在依賴變化時重新運行函數。
watchEffect 的作用以及各個參數的功能講解：
watchEffect(effect: (onInvalidate: InvalidateCbRegistrator) => void | (() => void) | Promise<void>, options?: WatchEffectOptions): WatchStopHandle
-
effect：要監聽的響應式數據以及需要執行的副作用函數。effect函數接收一個onInvalidate回調函數作為參數，用於在effect的依賴發生變化時執行清理函數。effect函數可以返回一個清理函數，也可以返回一個 Promise，Promise 完成時執行的函數也會被視為清理函數。如果effect函數中使用的數據沒有在響應式對象中被引用，那麼watchEffect不會監聽到這些數據的變化。options：監聽選項對象，可選。可以用來配置監聽的行為，例如deep、flush等選項。具體的選項請參考下麵的講解。- 返回值：一個函數，調用它可以停止監聽。
WatchEffectOptions
watchEffect 函數接受一個可選的選項對象，用於配置監聽行為。以下是 WatchEffectOptions 對象的屬性及其功能：
-
lazy：是否延遲執行effect函數。如果設置為true，則在首次調用watchEffect時不會執行effect函數，只有在其依賴發生變化時才會執行。預設為false。deep：是否深度監聽對象和數組的變化，預設為false。如果設置為true，則會遞歸監聽對象和數組中的所有屬性。flush：何時執行回調函數。預設為'pre'，表示在響應式數據變化後立即執行回調函數，但在同一事件迴圈中的其他變化不會觸發回調函數。如果設置為'post'，則會在同一事件迴圈中的所有變化都發生後執行回調函數。
例如，以下代碼使用 watchEffect 監聽 message 的變化，併在變化時執行回調函數。
import { watchEffect } from 'vue';
watchEffect(() => {
console.log(`message 變為 ${message}`);
});
下麵是一個簡單的例子，演示瞭如何使用 watchEffect 監聽響應式數據變化：
<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 值改變為：${message.value}`);
});
return {
message
};
}
});
</script>
在這個例子中，我們使用 ref 函數定義了一個名為 message 的響應式數據，並將其初始化為空字元串。我們使用 watchEffect 函數監聽 message 的變化，併在函數內部列印出 message 的值。因為 watchEffect 函數會自動跟蹤 message 的依賴，所以當用戶在輸入框中輸入內容時，watchEffect 函數就會重新運行，列印出新的 message 值。
需要註意的是，watchEffect 函數的回調函數不需要顯式地指定依賴項，它會自動跟蹤回調函數內部使用到的所有響應式數據。因此，當你使用 watchEffect 函數時，不需要再使用 watch 函數或 computed 函數來監聽數據變化。但是，如果你需要監聽某個特定的響應式數據變化，可以在回調函數中使用該數據，這樣 watchEffect 就會自動跟蹤它。
watchEffect 函數的返回值是一個用於停止監聽的函數。當你調用這個函數時，watchEffect 就會停止監聽響應式數據的變化。
以下是一個示例，演示如何使用 watchEffect 函數的返回值停止監聽：
<template>
<div>
<p>輸入框的值為：{{ message }}</p>
<button @click="stopWatching">停止監聽</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 值改變為：${message.value}`);
});
function stopWatching() {
stopWatching();
}
return {
message,
stopWatching
};
}
});
</script>
在這個例子中，我們定義了一個名為 stopWatching 的函數，它調用了 watchEffect 函數的返回值，從而停止了監聽。我們在模板中添加了一個按鈕，當用戶點擊它時，就會調用 stopWatching 函數，從而停止監聽 message 的變化。
watch的作用以及各個參數的功能講解：
watch 是 Vue 3 中用於監聽響應式數據變化的 API，它能夠在響應式數據發生變化時執行回調函數。以下是 watch 函數的參數及其功能：
watch(source: string | Function | Ref, callback: Function, options?: WatchOptions): WatchStopHandle
source：要監聽的響應式數據，可以是一個字元串（表示要監聽的數據在組件實例中的屬性名）、一個函數（返回要監聽的數據）或一個 ref 對象。callback：響應式數據變化時要執行的回調函數。回調函數接收兩個參數：新值和舊值。options：監聽選項對象，可選。可以用來配置監聽的行為，例如deep、immediate等選項。具體的選項請參考下麵的講解。- 返回值：一個函數，調用它可以停止監聽。
WatchOptions
watch 函數接受一個可選的選項對象，用於配置監聽行為。以下是 WatchOptions 對象的屬性及其功能：
immediate：是否在監聽開始時立即執行回調函數，預設為false。deep：是否深度監聽對象和數組的變化，預設為false。如果設置為true，則會遞歸監聽對象和數組中的所有屬性。flush：何時執行回調函數。預設為'pre'，表示在響應式數據變化後立即執行回調函數，但在同一事件迴圈中的其他變化不會觸發回調函數。如果設置為'post'，則會在同一事件迴圈中的所有變化都發生後執行回調函數。onTrack：監視屬性被訪問的函數。它接收一個追蹤對象（TrackOpTypes）和追蹤的目標對象（target）。可以用它來進行依賴追蹤分析等操作。onTrigger：監視屬性被修改的函數。它接收一個觸發對象（TriggerOpTypes）和觸發的目標對象（target）。可以用它來進行調試、性能分析等操作。-
例如，以下代碼監聽
message的變化，併在變化時執行回調函數，同時設置immediate選項為true，表示在組件掛載時立即執行一次回調函數。
import { watch } from 'vue';
watch(
() => message, // 要監聽的響應式數據
(newValue, oldValue) => {
console.log(`message 從 ${oldValue} 變為 ${newValue}`);
},
{
immediate: true // 在組件掛載時立即執行回調函數
}
);
watchEffect 和 watch 都是 Vue 3 中用於監聽響應式數據變化的 API，它們之間的主要區別在於回調函數的類型和依賴項的聲明方式。
watchEffect接收一個不帶參數的函數作為回調函數，在函數內部使用到的響應式數據變化時會自動觸發回調函數。watchEffect會自動追蹤響應式數據的變化，併在每次變化時重新運行回調函數。watch接收兩個參數：第一個參數是要監聽的響應式數據，第二個參數是一個回調函數。回調函數接收兩個參數：新值和舊值。在響應式數據變化時，watch會調用回調函數，並傳入新值和舊值。可以通過第三個參數來聲明要監聽的選項，例如deep、immediate等。
因為 watchEffect 自動追蹤響應式數據的變化，所以它更適合處理簡單的數據邏輯。如果需要監聽特定的響應式數據或使用更高級的選項，可以使用 watch 函數。使用 watch 函數需要顯式聲明要監聽的響應式數據，這可以使代碼更具可讀性。此外，watch 函數還支持聲明多個要監聽的響應式數據，這使得它可以處理更複雜的數據邏輯。
總之，如果你只需要監聽一些簡單的響應式數據變化，可以使用 watchEffect 函數。如果需要監聽特定的響應式數據或使用更高級的選項，可以使用 watch 函數。
以下是一個示例，演示 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 自動追蹤響應式數據的變化
watchEffect(() => {
console.log(`message1 值變為 ${message1.value}`);
});
// watch 需要顯式聲明要監聽的響應式數據
watch(message2, (newValue, oldValue) => {
console.log(`message2 從 ${oldValue} 變為 ${newValue}`);
});
function increment() {
message1.value++;
message2.value++;
}
return {
message1,
message2,
increment
};
}
});
</script>
在這個例子中，我們聲明瞭兩個響應式數據 message1 和 message2，並分別使用了 watchEffect 和 watch 監聽它們的變化。watchEffect 自動追蹤 message1 的變化，併在變化時觸發回調函數。而 watch 則需要顯式聲明要監聽的 message2，併在它的變化時觸發回調函數。在點擊按鈕時，我們同時增加了 message1 和 message2 的值，從而觸發了相應的回調函數。
watchEffect 和 watch 的區別在於，watchEffect 監聽的是一個函數的副作用，而 watch 監聽的是一個具體的響應式數據，因此 watchEffect 不需要顯式指定監聽的數據，它會自動檢測 effect 函數中使用的響應式數據，併在其發生變化時執行回調函數。此外，watchEffect 也不需要手動停止監聽，它會在組件卸載時自動停止監聽。但是，watchEffect 不支持監聽選項對象中的 immediate、onTrack 和 onTrigger 屬性。
如果watch的監聽對象是數組:
如果 watch 監聽的是一個數組，則可以使用 deep 選項來深度監聽數組元素的變化。當 deep 為 true 時，watch 會遞歸監聽數組中每個元素的變化。
例如，以下代碼使用 watch 監聽 list 數組的變化，併在變化時執行回調函數。
import { watch } from 'vue';
watch(
() => list,
(newList, oldList) => {
console.log('list 變化了', newList, oldList);
},
{ deep: true }
);
在上面的代碼中，watch 監聽的是一個計算屬性，計算屬性返回 list 數組。由於在監聽選項中設置了 deep: true，因此 watch 會深度監聽 list 數組，即遞歸監聽數組中每個元素的變化。
註意，當使用 deep 選項監聽數組時，如果數組中的元素是對象，則需要確保這些對象是響應式的，否則無法監聽它們的變化。如果數組中的元素不是響應式的對象，則無法監聽其變化。
