Vue 3 中的 watchEffect 和 watch 有什么区别？

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 组件中的状态变化。开发者应根据具体的使用场景和需求来选择最合适的方法。