vue3中watch和watchEffect使用实例分析

前言

在Vue 3中，watch和watchEffect是用于侦听数据变化并执行相应回调函数的方法。它们在响应式编程中非常有用，可以帮助我们实现数据的自动更新，而不需要手动去修改。

watch

watch方法用于侦听指定数据的变化，并在数据发生变化时触发相应的回调函数。它的基本语法如下：

watch(要观察的数据, 回调函数, 选项)

要观察的数据可以是Vue实例中的响应式数据，也可以是计算属性。回调函数会在被观察的数据发生变化时被调用，并接收两个参数：新值和旧值。

选项是一个可选的对象，用于配置watch的行为。常用的选项有：

• immediate： 是否在初始渲染时立即执行回调函数，默认为false。
• deep： 是否深度观察对象或数组内部值的变化，默认为false。
• handler： 当回调函数较复杂时，可以将其提取为一个单独的函数，并将函数名作为handler选项的值。

下面是一个示例，演示了如何使用watch：

// 在组件中的setup函数中使用watch
import { ref, watch } from 'vue';

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

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

    return { count };
  }
}

watchEffect

watchEffect方法会在组件渲染过程中自动追踪其所使用的响应式数据，并在数据发生变化时自动调用相应的回调函数。与watch不同的是，watchEffect不需要明确指定要观察的数据，它会自动追踪组件内使用的所有响应式数据。

watchEffect的基本语法如下：

watchEffect(回调函数, 选项)

回调函数的参数是当前watchEffect所追踪的响应式数据。选项与watch的选项基本相同。

下面是一个使用watchEffect的示例：

// 在组件中的setup函数中使用watchEffect
import { ref, watchEffect } from 'vue';

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

    watchEffect(() => {
      console.log('count发生变化了', count.value);
    });

    return { count };
  }
}

总结

在Vue 3中，watch和watchEffect是非常有用的响应式编程工具。它们可以帮助我们在数据发生变化时执行相应的逻辑，从而实现数据的自动更新。

watch方法适用于需要明确指定要观察的数据和回调函数的场景，而watchEffect则适用于不需要明确指定要观察的数据，而是自动追踪组件内使用的所有响应式数据的场景。

通过合理使用watch和watchEffect，我们可以更加高效地处理数据变化，并编写出更加可维护和可扩展的代码。