VVLL.net

vue3 中 watch 和 watchEffect 区别

日期:2024-08-22 09:58:31

watch 和 watchEffect 区别

官方文档 https://cn.vuejs.org/guide/essentials/watchers#watch-vs-watcheffect

watch 和 watchEffect 都能响应式地执行有副作用的回调。它们之间的主要区别是追踪响应式依赖的方式:

  • watch 只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外,仅在数据源确实改变时才会触发回调。watch 会避免在发生副作用时追踪依赖,因此,我们能更加精确地控制回调函数的触发时机。
  • watchEffect,则会在副作用发生期间追踪依赖。它会在同步执行过程中,自动追踪所有能访问到的响应式属性。这更方便,而且代码往往更简洁,但有时其响应性依赖关系会不那么明确。

在 Vue 3 中,watchwatchEffect 是用于监听和响应变化的两个重要工具,但它们有一些关键的区别。下面是它们的详细解释:

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);