Vue3中的watch和watchEffect如何用

在Vue3中，watch和watchEffect是两个非常重要的响应式API，它们用于监听数据的变化并执行相应的操作。本文将详细介绍这两个API的使用方法、区别以及在实际开发中的应用场景。

1. watch的基本用法

watch用于监听一个或多个响应式数据的变化，并在数据变化时执行回调函数。它的基本语法如下：

import { watch, ref } from 'vue';

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

    watch(count, (newValue, oldValue) => {
      console.log(`count changed from ${oldValue} to ${newValue}`);
    });

    return {
      count,
    };
  },
};

1.1 监听多个数据源

watch可以同时监听多个数据源，只需将数据源放在一个数组中即可：

import { watch, ref } from 'vue';

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

    watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
      console.log(`count changed from ${oldCount} to ${newCount}`);
      console.log(`name changed from ${oldName} to ${newName}`);
    });

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

1.2 深度监听

默认情况下，watch是浅层监听的，即它只会监听数据的第一层变化。如果要监听对象或数组内部的变化，可以使用deep选项：

import { watch, ref } from 'vue';

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

    watch(
      user,
      (newValue, oldValue) => {
        console.log('user changed', newValue);
      },
      { deep: true }
    );

    return {
      user,
    };
  },
};

1.3 立即执行回调

默认情况下，watch的回调函数只有在监听的数据发生变化时才会执行。如果希望在组件初始化时立即执行一次回调函数，可以使用immediate选项：

import { watch, ref } from 'vue';

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

    watch(
      count,
      (newValue, oldValue) => {
        console.log(`count changed from ${oldValue} to ${newValue}`);
      },
      { immediate: true }
    );

    return {
      count,
    };
  },
};

2. watchEffect的基本用法

watchEffect是Vue3中引入的一个新的API，它会在组件初始化时立即执行一次，并在其依赖的响应式数据发生变化时重新执行。它的基本语法如下：

import { watchEffect, ref } from 'vue';

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

    watchEffect(() => {
      console.log(`count is ${count.value}`);
    });

    return {
      count,
    };
  },
};

2.1 自动追踪依赖

watchEffect的一个显著特点是它会自动追踪其内部使用的响应式数据，并在这些数据发生变化时重新执行。这意味着你不需要显式地指定要监听的数据源，watchEffect会自动处理这些依赖。

import { watchEffect, ref } from 'vue';

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

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

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

2.2 停止监听

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

import { watchEffect, ref } from 'vue';

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

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

    // 停止监听
    stop();

    return {
      count,
    };
  },
};

2.3 清理副作用

watchEffect的回调函数可以返回一个清理函数，这个清理函数会在watchEffect重新执行之前被调用，或者在watchEffect停止监听时被调用。这个特性非常适合用于清理一些副作用，比如取消网络请求、清除定时器等。

import { watchEffect, ref } from 'vue';

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

    watchEffect((onInvalidate) => {
      const timer = setTimeout(() => {
        console.log(`count is ${count.value}`);
      }, 1000);

      onInvalidate(() => {
        clearTimeout(timer);
      });
    });

    return {
      count,
    };
  },
};

3. watch与watchEffect的区别

虽然watch和watchEffect都可以用于监听响应式数据的变化，但它们在使用场景和功能上有一些区别：

3.1 依赖追踪

• watch需要显式地指定要监听的数据源，并且只有在这些数据源发生变化时才会执行回调函数。
• watchEffect会自动追踪其内部使用的响应式数据，并在这些数据发生变化时重新执行。

3.2 执行时机

• watch的回调函数只有在监听的数据发生变化时才会执行，除非使用了immediate选项。
• watchEffect在组件初始化时会立即执行一次，并在其依赖的响应式数据发生变化时重新执行。

3.3 回调函数的参数

• watch的回调函数会接收两个参数：新值和旧值。
• watchEffect的回调函数没有参数，因为它会自动追踪依赖并重新执行。

3.4 清理副作用

• watch不支持清理副作用的功能。
• watchEffect可以通过返回一个清理函数来处理副作用。

4. 实际应用场景

4.1 使用watch的场景

• 需要监听特定数据的变化：当你只需要监听某个特定的响应式数据时，watch是一个更好的选择，因为它可以精确地控制监听的数据源。
• 需要获取旧值：如果你需要在数据变化时获取旧值，watch是唯一的选择，因为watchEffect不会提供旧值。

4.2 使用watchEffect的场景

• 自动追踪依赖：当你需要监听多个响应式数据，并且这些数据可能会频繁变化时，watchEffect可以自动追踪依赖，减少手动维护的工作量。
• 立即执行：如果你希望在组件初始化时立即执行一次逻辑，并且在这些逻辑依赖的数据发生变化时重新执行，watchEffect是一个更好的选择。
• 清理副作用：如果你需要在监听停止时清理一些副作用，比如取消网络请求或清除定时器，watchEffect的清理函数功能非常有用。

5. 总结

watch和watchEffect是Vue3中两个非常重要的响应式API，它们分别适用于不同的场景。watch更适合用于监听特定数据的变化，并且可以获取旧值；而watchEffect则更适合用于自动追踪依赖、立即执行逻辑以及清理副作用。

在实际开发中，你可以根据具体的需求选择合适的API。如果你需要精确控制监听的数据源，并且需要获取旧值，那么watch是更好的选择；如果你希望自动追踪依赖，并且需要立即执行逻辑或清理副作用，那么watchEffect是更好的选择。

通过合理地使用watch和watchEffect，你可以更高效地处理Vue3中的响应式数据变化，提升应用的性能和可维护性。