watch 和 watchEffect 区别
官方文档 https://cn.vuejs.org/guide/essentials/watchers#watch-vs-watcheffect
watch 和 watchEffect 都能响应式地执行有副作用的回调。它们之间的主要区别是追踪响应式依赖的方式:
- watch 只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外,仅在数据源确实改变时才会触发回调。watch 会避免在发生副作用时追踪依赖,因此,我们能更加精确地控制回调函数的触发时机。
- watchEffect,则会在副作用发生期间追踪依赖。它会在同步执行过程中,自动追踪所有能访问到的响应式属性。这更方便,而且代码往往更简洁,但有时其响应性依赖关系会不那么明确。
在 Vue 3 中,watch
和 watchEffect
是用于监听和响应变化的两个重要工具,但它们有一些关键的区别。下面是它们的详细解释:
watch
watch
用于监听一个或多个特定的响应式数据源,并在其发生变化时执行回调函数。它适合处理需要在数据变化时进行特定操作的场景,如调用 API 或进行复杂的逻辑处理。
用法
- 单一数据源监听:
import { ref, watch } from 'vue';
const count = ref(0);
watch(count, (newValue, oldValue) => {
console.log(`count changed from ${oldValue} to ${newValue}`);
});
- 多个数据源监听:
import { ref, watch } from 'vue';
const count = ref(0);