vue3中watch 与 watchEffect的区别

vue3中watch 与 watchEffect的区别

在Vue 3中，watch和watchEffect都是用于响应式地监听数据变化的函数，但它们在使用和行为上有一些区别，下面将对它们进行简要对比：

1. 使用方式：

• watch需要在组件的setup函数内部使用，并手动声明要监听的数据和对应的回调函数。

import { watch } from 'vue';

setup() {
  watch(data, (newVal, oldVal) => {
    // 处理数据变化的逻辑
  });
}

• watchEffect也需要在组件的setup函数内部使用，但它会自动追踪其内部使用到的响应式数据，并在任何被追踪的数据发生变化时触发回调函数。

import { watchEffect } from 'vue';

setup() {
  watchEffect(() => {
    // 使用到的响应式数据变化时，这里的逻辑会被执行
  });
}

2. 执行时机：

• watch在初始化时并不会执行回调函数，只有被监听的数据发生变化时才会执行。

• watchEffect会在初始化时立即执行一次回调函数，并自动追踪回调函数内部使用的响应式数据，当这些数据发生变化时，回调函数会再次执行。

3. 数据追踪：

• watch需要明确指定要监听的数据，只有这些数据发生变化时，才会触发回调函数。

• watchEffect会自动追踪其回调函数内部使用的所有响应式数据，只要使用到的数据发生变化，就会触发回调函数。

总体来说，watch是一个精确监控数据变化的函数，需要手动指定要监听的数据，并且只有这些数据发生变化时才会执行回调函数；而watchEffect是一个自动追踪数据变化的函数，会自动追踪其回调函数内部使用到的所有响应式数据，并在任何被追踪的数据发生变化时触发回调函数。因此，根据具体的场景和需求，选择适合的函数来监听数据的变化。