在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可能更适合你的场景。