Vue3 中数据监听之 watch 与 watchEffect 的使用

在 Vue3 的开发中，数据监听是一项至关重要的功能，它能够帮助我们在数据发生变化时执行特定的操作。其中，watch 和 watchEffect 是两个常用的数据监听方法，它们各有特点，适用于不同的场景。

首先来了解一下 watch。watch 是一个专门用于监听特定数据源变化的方法。它接收两个主要参数，第一个参数是要监听的数据源，可以是一个响应式数据、一个 getter 函数或者是一个包含多个数据源的数组。第二个参数是一个回调函数，当监听的数据源发生变化时，这个回调函数就会被触发。例如：

import { ref, watch } from 'vue';

const count = ref(0);

watch(count, (newValue, oldValue) => {
    console.log(`新值: ${newValue}, 旧值: ${oldValue}`);
});

count.value++;

在这个例子中，我们通过 watch 监听了 count 的变化，每当 count 的值更新时，回调函数就会打印出新值和旧值。

watch 的优势在于它可以精确地控制监听的数据源，并且能够获取到数据变化前后的值，这在一些需要对数据变化进行细致处理的场景中非常有用。

接下来看看 watchEffect。watchEffect 是 Vue3 新增的一个响应式副作用函数。它会立即执行一次传入的回调函数，并自动追踪回调函数中使用的所有响应式数据。只要这些响应式数据发生变化，回调函数就会重新执行。例如：

import { ref, watchEffect } from 'vue';

const message = ref('Hello');

watchEffect(() => {
    console.log(message.value);
});

message.value = 'World';

在这个例子中，watchEffect 会立即打印出 message 的初始值，当 message 的值发生变化时，它又会自动重新执行回调函数，打印出新的值。

watchEffect 的好处在于它的使用更加简洁，不需要显式地指定监听的数据源，Vue 会自动追踪依赖。它适用于那些只关心数据变化后执行某些操作，而不关心数据变化前后具体值的场景。

watch 和 watchEffect 在 Vue3 中都扮演着重要的角色。在实际开发中，我们需要根据具体的需求来选择合适的方法，以便更高效地实现数据监听和相应的业务逻辑。