Vue 3 中 watch与watchEffect区别

在Vue 3的Composition API中，watch和watchEffect都是用于侦听响应式数据的变化，但它们之间有一些关键的区别。以下是它们在setup函数中使用的例子和区别说明。

watch

watch函数允许你指定一个或多个响应式数据源，并在这些数据源变化时执行一个回调函数。它提供了一种细粒度的控制，因为你可以精确地指定哪些数据变化时需要触发响应。

<script setup>  
import { ref, watch } from 'vue';  
const count = ref(0);  
watch(count, (newValue, oldValue) => {  
  console.log(`count changed from ${oldValue} to ${newValue}`);  
});  
// 或者侦听多个源  
const firstName = ref('');
const lastName = ref('');
watch([firstName, lastName], ([newFirst, newLast], [oldFirst, oldLast]) => {  
  console.log(`Name changed from ${oldFirst} ${oldLast} to ${newFirst} ${newLast}`);  
});  
</script>

watchEffect

watchEffect函数则会在其依赖的响应式数据变化时重新运行。它不需要你明确指定哪些数据是依赖项，Vue会自动追踪。这使得它在处理有多个依赖项且难以手动指定它们时非常有用。

<script setup>  
import { ref, watchEffect } from 'vue';  
const count = ref(0);  
const doubleCount = computed(() => count.value * 2);  
watchEffect(() => {  
  console.log(`Count is: ${count.value}, doubleCount is: ${doubleCount.value}`);  
});  
// 当count变化时，上面的watchEffect会重新运行  
</script>

区别

细粒度控制：watch允许你精确指定要侦听的数据源，而watchEffect则会自动追踪其执行函数内部的响应式依赖。

执行时机：watch的回调函数是在其侦听的数据源实际变化之后才执行，
而watchEffect则是在组件渲染后和依赖项变化时立即执行。

性能考虑：由于watchEffect会在依赖项变化时重新运行整个函数，因此如果函数内部执行了昂贵的操作，这可能会影响性能。而watch则只会在指定的数据源变化时执行，提供了更好的性能控制。

默认行为：watchEffect在默认情况下，会立即执行一次其回调函数，以捕获初始的依赖项状态（可以通过选项 { immediate: false } 来改变这一行为）。而watch不会立即执行，除非显式地设置 { immediate: true }。

停止侦听：两者都可以通过返回的停止函数来停止侦听。

在选择使用watch还是watchEffect时，你应该根据你的具体需求来决定。如果你需要精确控制哪些数据变化时触发响应，或者希望避免不必要的重新计算，那么watch可能是更好的选择。而如果你希望Vue自动处理依赖项，并且不介意在依赖项变化时重新运行整个函数，那么watchEffect可能更适合你的场景。