Vue3 的 watchEffect 和 watch ：揭秘响应式编程的新利器

2023-05-26 03:47:38

Vue3 中的响应式编程：watchEffect 与 watch，深入探秘

在 Vue.js 的世界中，响应式编程是一项核心技术，它使开发人员能够轻松地实现数据与视图的同步更新。在 Vue3 中，watchEffect 和 watch 作为响应式编程的两大法宝，因其强大的功能而备受关注。本文将深入探秘这两位新晋大咖的奥秘，帮助你理解它们的工作原理以及在不同场景中的应用。

watchEffect：自动收集依赖，高效更新视图

想象一下这样一个场景：你有这样一个组件，它需要根据某个状态值动态渲染不同的内容。在 Vue2 中，你可能需要使用 watch 来监听状态值的变化，然后手动触发视图更新。然而，有了 watchEffect，一切变得更加简单了。

watchEffect 的强大之处在于，它可以自动收集函数中用到的响应式变量作为依赖项，并在这些依赖项发生变化时自动执行该函数。换句话说，你不必手动监听和更新视图，而是可以专注于业务逻辑的实现。

const watchEffectExample = () => {
  // 获取状态值
  const state = ref('initial');

  // 响应式变量变化时自动执行函数
  watchEffect(() => {
    // 依赖项 state 发生变化时，更新视图
    console.log(`State changed to: ${state.value}`);
  });
};

在上面的例子中，watchEffect 会在组件初始化时立即执行一次，然后每当 state 值发生变化时，它都会自动重新执行。这样，视图就可以始终保持与数据同步，而你无需编写任何额外的代码。

watch：手动指定依赖项，精准控制更新时机

虽然 watchEffect 十分强大，但有时我们可能需要更精细的控制来决定何时更新视图。这时，watch 就派上用场了。

与 watchEffect 不同，watch 允许你手动指定需要监听的依赖项。这对于那些需要在特定条件下才更新视图的场景非常有用。

const watchExample = () => {
  // 获取状态值
  const state = ref('initial');

  // 监听状态值的变化，仅在 state 为 'active' 时更新视图
  watch(
    // 需要监听的依赖项
    () => state.value,
    // 当依赖项发生变化时的处理函数
    (newValue, oldValue) => {
      if (newValue === 'active') {
        // 满足条件，更新视图
        console.log(`State changed to: ${newValue}`);
      }
    },
    {
      // 配置选项
      immediate: true,
    }
  );
};

在上面的例子中，watch 会在组件初始化时立即执行一次，然后每当 state 值发生变化时，它都会重新执行。但是，只有当 state 值变为 'active' 时，才会触发视图更新。

何时选择 watchEffect，何时选择 watch？

watchEffect 和 watch 各有优势，在不同的场景下发挥着不同的作用。一般来说，如果你需要自动收集依赖项并频繁更新视图，那么 watchEffect 是你的不二之选。而如果你需要手动指定依赖项并精确控制更新时机，那么 watch 则更适合你。

特性	watchEffect	watch
依赖项收集	自动	手动
更新时机	依赖项发生变化时	满足特定条件时
推荐场景	频繁更新视图，需要自动收集依赖项	精确控制更新时机，需要手动指定依赖项