您现在的位置是：首页 >其他 >Vue3 中的 watch 和 watchEffect：监听数据变化的利器网站首页其他

在 Vue3 中，响应式系统是其核心特性之一。为了更好地处理数据变化，Vue3 提供了 watch 和 watchEffect 两个 API。它们可以帮助我们在数据发生变化时执行一些副作用操作。本文将详细介绍这两个 API 的使用方法，并通过代码示例帮助你更好地理解它们的区别和应用场景。

1. watch：监听特定数据的变化

watch 是 Vue3 中用于监听特定数据变化的 API。它允许你监听一个或多个响应式数据，并在它们发生变化时执行回调函数。

import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watch(count, (newValue, oldValue) => {
      console.log(`count 从 ${oldValue} 变为 ${newValue}`);
    });

    return {
      count,
    };
  },
};

在上面的代码中，我们使用 ref 创建了一个响应式数据 count，然后使用 watch 监听 count 的变化。当 count 的值发生变化时，回调函数会被触发，并打印出新旧值。

监听多个数据
watch 还可以同时监听多个数据源。你可以将这些数据源放在一个数组中传递给 watch。

import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const name = ref('Vue');

    watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
      console.log(`count 从 ${oldCount} 变为 ${newCount}`);
      console.log(`name 从 ${oldName} 变为 ${newName}`);
    });

    return {
      count,
      name,
    };
  },
};

在这个例子中，我们同时监听了 count 和 name 的变化。当其中任何一个数据发生变化时，回调函数都会被触发。

深度监听
如果你需要监听一个对象或数组内部的变化，可以使用 deep 选项。

import { ref, watch } from 'vue';

export default {
  setup() {
    const user = ref({
      name: 'Vue',
      age: 3,
    });

    watch(
      user,
      (newValue, oldValue) => {
        console.log('user 发生变化', newValue);
      },
      { deep: true }
    );

    return {
      user,
    };
  },
};

在这个例子中，我们监听了 user 对象，并启用了 deep 选项。这样，当 user 对象的任何属性发生变化时，回调函数都会被触发。

2. watchEffect：自动追踪依赖并执行副作用

watchEffect 是 Vue3 中另一个用于监听数据变化的 API。与 watch 不同，watchEffect 会自动追踪其回调函数中使用的响应式数据，并在这些数据发生变化时重新执行回调函数。

import { ref, watchEffect } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watchEffect(() => {
      console.log(`count 的值是 ${count.value}`);
    });

    return {
      count,
    };
  },
};

在这个例子中，watchEffect 会自动追踪 count 的变化，并在 count 的值发生变化时重新执行回调函数。

自动追踪依赖
watchEffect 的一个强大之处在于它会自动追踪回调函数中使用的所有响应式数据。这意味着你不需要显式地指定要监听的数据源。

import { ref, watchEffect } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const name = ref('Vue');

    watchEffect(() => {
      console.log(`count 的值是 ${count.value}, name 的值是 ${name.value}`);
    });

    return {
      count,
      name,
    };
  },
};

在这个例子中，watchEffect 会自动追踪 count 和 name 的变化，并在它们中的任何一个发生变化时重新执行回调函数。

停止监听
watchEffect 返回一个停止监听的函数，你可以在需要时调用它来停止监听。

import { ref, watchEffect } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const stop = watchEffect(() => {
      console.log(`count 的值是 ${count.value}`);
    });

    // 停止监听
    stop();

    return {
      count,
    };
  },
};

在这个例子中，我们调用了 stop 函数来停止 watchEffect 的监听。

3. watch 和 watchEffect 的区别

依赖追踪：watch 需要显式地指定要监听的数据源，而 watchEffect 会自动追踪回调函数中使用的响应式数据。

执行时机：watch 的回调函数只有在监听的数据发生变化时才会执行，而 watchEffect 的回调函数会在初始化时立即执行一次，并在依赖的数据发生变化时重新执行。

灵活性：watch 提供了更多的选项，如 deep 和 immediate，可以更灵活地控制监听行为。而 watchEffect 则更适用于简单的副作用场景。

4. 总结
watch 和 watchEffect 是 Vue3 中用于监听数据变化的两个重要 API。watch 更适合需要精确控制监听行为的场景，而 watchEffect 则更适合自动追踪依赖并执行副作用的场景。根据具体的需求选择合适的 API，可以让你的代码更加简洁和高效。

希望本文能帮助你更好地理解和使用 Vue3 中的 watch 和 watchEffect。如果你有任何问题或建议，欢迎在评论区留言讨论！