在 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 選項監聽陣列時，如果陣列中的元素是物件，則需要確保這些物件是回應式的，否則無法監聽它們的變化，如果陣列中的元素不是回應式的物件，則無法監聽其變化，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/550362.html
標籤：其他
上一篇：生產事故-走近科學之消失的JWT
下一篇：js判斷是否手機模式