vue3的watch和watchEffect你了解吗

当我们在使用Vue.js开发应用时，经常需要监听数据的变化并做出相应的响应，在Vue.js中，我们可以使用watch和watchEffect这两个响应式API来实现数据的监听。

watch

watch是Vue.js中的一个响应式API，用于监听指定数据的变化并做出相应的响应。在Vue3中，我们可以通过watch函数来创建一个监听器。

watch的基本用法

以下是watch的基本用法：

import { watch } from 'vue';

watch(source, callback, options);

我们需要传递三个参数：

1. source: 要监听的数据。可以是一个Refs对象、一个计算属性或一个函数，返回要监听的数据。

2. callback: 当监听的数据变化时会被调用的函数，该函数接受两个参数：新的值和旧的值。

3. options（可选）：一些可选的选项参数，例如deep（是否深度监听对象的属性）、immediate（是否在开始监听时执行一次回调函数）等。

以下示例演示如何监听一个Refs对象的变化：

import { watch, ref } from "vue";

const count = ref(0);

watch(count, (newVal, oldVal) => {
  console.log(`count: ${oldVal} -> ${newVal}`);
});

每次count的值发生变化时，回调函数将会被调用，输出旧值和新值。

监听多个数据

虽然我们可以分别使用多个watch函数来监听多个不同的数据，但更好的做法是一次性地同时监听多个数据。在Vue3中，我们可以使用一个watch函数来同时监听一组数据。

以下示例演示如何同时监听多个数据：

import { watch, ref, reactive } from "vue";

const count = ref(0);
const state = reactive({ msg: "Hello, Vue3!" });

watch([count, () => state.msg], ([countVal, msgVal], [prevCount, prevMsg]) => {
  console.log(`count: ${prevCount} -> ${countVal}`);
  console.log(`msg: ${prevMsg} -> ${msgVal}`);
});

watch函数的第一个参数可以传递一个数组，其中每个元素都是一个要监听的数据项。这里传递了两个数据项：count和一个函数，该函数返回state对象的msg属性。

回调函数的第一个参数是一个由新的数据值组成的数组，第二个参数是一个由旧的数据值组成的数组，这样我们就可以分别获取不同数据项的新值和旧值，方便地进行处理。

watchEffect

watchEffect是Vue3中的另一个响应式API，它可以帮助我们监听一个数据的变化并在回调函数中执行对应的操作。与watch不同的是，watchEffect不需要自己定义要监听的数据和回调函数，而是通过自动追踪依赖数据的变化并即时执行回调函数来实现。

以下是watchEffect的基本用法：

import { watchEffect, ref } from "vue";

const count = ref(0);

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

我们传递了一个函数作为watchEffect的唯一参数，该函数会被立即执行，并且在这个函数中使用的所有响应式数据项（例如count）被自动追踪，只要其中任何一个数据发送了变化，该函数就会再次被调用。

limit选项

如果我们想限制watchEffect不要在每次变化时都重新执行，我们可以使用limit选项来限制执行次数。

以下示例演示如何使用watchEffect的limit选项来限制执行次数：

import { watchEffect, ref } from "vue";

const count = ref(0);

watchEffect((onInvalidate) => {
  const timer = setInterval(() => {
    count.value++;
  }, 1000);

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

}, {
  limit: 3
});

在这个例子中，我们使用了setInterval函数每秒钟递增count的值，同时我们传递了一个匿名函数作为watchEffect的第一个参数。在这个函数中，我们可以轻松地使用count响应式变量。

我们还使用了onInvalidate函数来注册一个无效化回调，这个无效化回调在watchEffect结束时被调用。在这个回调函数中，我们清除了之前注册的计时器。

最后，我们使用limit选项来限制watchEffect仅在前三次变化时执行。在第四次变化开始时，watchEffect将不再执行。

在Vue3中，watch和watchEffect的使用场景由我们自己的需求决定。需要注意的是，当数据变化时，它们执行的过程和性能都是不同的。watch适合处理复杂的业务逻辑，而watchEffect适合处理简单的副作用函数。