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

时间:2024-03-04 13:48:26

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

相关文章