Vue 3 中的?watchEffect?和?watch?有什么區別？

Vue 3 引入了 Composition API，為開發者提供了更加靈活和組織化的方式來組合和復用代碼邏輯。在響應式系統中，watch?和?watchEffect?是兩個重要的函數，用于觀察和響應 Vue 組件中狀態（reactive properties）的變化。盡管它們的目的相似，但在使用方式和功能上存在一些關鍵的區別。

1.?watchEffect

watchEffect?函數允許你自動跟蹤其依賴項，并在這些依賴項發生變化時重新運行傳遞給它的函數（effect 函數）。它不需要顯式地聲明依賴哪些響應式屬性，因為 Vue 會自動收集這些信息。

javascript復制代碼

	import { ref, watchEffect } from 'vue';
	export default {
	setup() {
	const count = ref(0);
	watchEffect(() => {
	console.log(`count is: ${count.value}`);
	});
	return {
	count
	};
	}
	};

在這個例子中，每當?count?發生變化時，watchEffect?里的函數就會被調用，輸出新的?count?值。注意我們沒有顯式告訴?watchEffect?它依賴于?count，這是因為 Vue 在執行 effect 函數時會自動追蹤其依賴。

2.?watch

相比之下，watch?函數需要你顯式地聲明你想要觀察哪些響應式屬性，以及當這些屬性變化時應該做什么。watch?接收兩個參數：一個是要觀察的響應式引用或計算屬性（可以是一個數組，用于觀察多個值），另一個是處理變化的回調函數。

javascript復制代碼

	import { ref, watch } from 'vue';
	export default {
	setup() {
	const count = ref(0);
	watch(count, (newValue, oldValue) => {
	console.log(`count changed from ${oldValue} to ${newValue}`);
	});
	return {
	count
	};
	}
	};

在這個例子中，watch?明確地被告知要觀察?count?的變化，并且當?count?變化時，它會調用提供的回調函數，該函數接收新值和舊值作為參數。

主要區別

1. 依賴收集：watchEffect?自動收集依賴，而?watch?需要顯式聲明依賴。

2. 參數：watchEffect?沒有接收要觀察的特定屬性的參數，而?watch?需要你指定要觀察的屬性。

3. 回調函數的參數：watchEffect?的回調函數沒有參數（因為它自動跟蹤所有依賴），而?watch?的回調函數可以接收新值和舊值作為參數。

4. 立即執行：watchEffect?會立即執行傳入的函數，并且在組件卸載時自動停止。watch?默認不會立即執行回調（除非你傳遞了?{ immediate: true }?作為選項），并且也需要在組件卸載時手動停止（盡管在?setup?函數中定義的?watch?會在組件卸載時自動停止）。

5. 停止和重啟：watchEffect?返回一個停止函數，可以用來停止對依賴的追蹤和回調的執行。一旦停止，你不能重啟同一個?watchEffect。而?watch?也返回一個停止函數，但它可以在停止后被重新啟動，只要再次調用?watch。

6. 性能考慮：由于?watchEffect?自動追蹤所有依賴，它可能在某些情況下比?watch?更消耗性能，尤其是當 effect 函數內部的依賴項很多且經常變化時。而?watch?允許你更精確地控制你要觀察什么，從而可能提供更好的性能優化機會。

7. 使用場景：當你想要觀察一個或多個特定的響應式屬性，并且需要在變化時執行特定的邏輯時，使用?watch。當你不太關心具體的依賴項，只是想要在它們中的任何一個發生變化時執行某些邏輯時，使用?watchEffect。

總的來說，watchEffect?和?watch?提供了兩種不同但互補的方式來觀察和響應 Vue 組件中的狀態變化。開發者應根據具體的使用場景和需求來選擇最合適的方法。