Vue3中watch的用法

在Vue3中，watch 选项的用法与之前版本的Vue略有不同。Vue3中使用了Composition API，在组合式API中，watch 选项被替换成了一个新的函数 watchEffect 和一个新的函数 watch。下面是关于 watchEffect 和 watch 的用法说明：

watch 和watchEffect

1. watchEffect 函数：

   • watchEffect 函数会立即执行一个响应式的副作用函数，并在其所依赖的响应式数据发生变化时重新运行该副作用函数。
   • watchEffect 函数的语法如下：

     watchEffect(effect: () => void): StopHandle
     

   • 示例代码：

     import { watchEffect, reactive } from 'vue';
     
     const data = reactive({ count: 0 });
     
     watchEffect(() => {
       console.log('Count:', data.count);
     });
     
     // 修改数据，触发副作用函数
     data.count++; // 输出："Count: 1"
     

2. watch 函数：

   • watch 函数用于观察一个或多个响应式数据，并在数据发生变化时执行相应的回调函数。
   • watch 函数的语法如下：

     watch(source: Ref | (() => any) | (() => any)[], callback: () => void): StopHandle
     

   • source 可以是一个 Ref 对象、一个计算函数或一个包含多个计算函数的数组。
   • callback 是一个回调函数，在 source 的值发生变化时执行。
   • 示例代码：

     import { reactive, watch } from 'vue';
     
     const data = reactive({ count: 0 });
     
     watch(() => data.count, (newCount, oldCount) => {
       console.log('Count changed:', newCount, oldCount);
     });
     
     // 修改数据，触发回调函数
     data.count++; // 输出："Count changed: 1 0"
     

这就是Vue3中watch的用法。通过watchEffect和watch函数，你可以方便地观察和响应响应式数据的变化。需要注意的是，在Vue3中，watchEffect和watch是在 setup 函数中使用的，因为Composition API主要是用于组件的逻辑复用，而不是在选项中声明。

在对比watchEffect和watch时，可以总结出以下区别：

• watchEffect函数会立即执行副作用函数，并在其依赖的响应式数据发生变化时重新运行副作用函数，而watch函数需要显式地指定要监听的数据和回调函数。
• watchEffect函数没有明确的依赖关系，它会自动追踪副作用函数中使用的所有响应式数据，而watch函数需要显式地指定要监听的数据。
• watchEffect函数的副作用函数没有参数，而watch函数的回调函数会接收到新值和旧值作为参数。
• watch函数可以监听多个数据的变化，而watchEffect函数只能监听一个副作用函数中使用的响应式数据的变化。

根据具体的使用场景，你可以选择使用watchEffect或watch函数来监听响应式数据的变化。

watch监听多个数据

在Vue3中，可以使用watch函数来监听多个数据的变化。watch函数接受一个数组作为第一个参数，数组中可以包含多个响应式数据或计算函数。当数组中的任一数据发生变化时，都会触发回调函数。

下面是一个示例代码，演示了如何使用watch函数监听多个数据的变化：

import { reactive, watch } from 'vue';

const data = reactive({
  count1: 0,
  count2: 0,
});

watch([() => data.count1, () => data.count2], ([newCount1, newCount2], [oldCount1, oldCount2]) => {
  console.log('Count changed:', newCount1, newCount2, oldCount1, oldCount2);
});

// 修改数据，触发回调函数
data.count1++; // 输出："Count changed: 1 0 0 0"
data.count2++; // 输出："Count changed: 1 1 1 0"

在上述示例中，我们使用了一个包含两个计算函数的数组作为watch函数的第一个参数。当data.count1或data.count2的值发生变化时，回调函数会被触发，并且可以获取到新的值和旧的值。

需要注意的是，回调函数的参数是一个数组，包含了所有被监听数据的新值和旧值，按照数组中的顺序对应着监听数据的顺序。

通过这种方式，你可以方便地监听多个数据的变化，并在回调函数中进行相应的处理。

watch监听器的配置参数

watch函数在监听响应式数据变化时，可以接收一个可选的配置对象作为第三个参数。这个配置对象可以用来自定义watch监听器的行为。

配置对象可以包含以下属性：

• immediate：布尔值，表示是否在初始渲染时立即执行回调函数。默认值为false。
• deep：布尔值，表示是否深度监听对象或数组的变化。如果为true，则会递归监听对象内部的属性或数组的元素的变化。默认值为false。
• flush：字符串，表示何时触发回调函数。可选值为"pre"、"post"或"sync"。默认值为"post"。其中：
  • "pre"：在DOM更新之前同步触发回调函数。
  • "post"：在DOM更新之后异步触发回调函数。
  • "sync"：在DOM更新之前同步触发回调函数，并且在DOM更新之后再次异步触发回调函数。
• onTrack：函数，用于追踪响应式数据的访问。当监听的数据被访问时，会调用该函数。函数的参数是一个DebuggerEvent对象，包含了相关的信息。
• onTrigger：函数，用于追踪响应式数据的变化。当监听的数据发生变化时，会调用该函数。函数的参数是一个DebuggerEvent对象，包含了相关的信息。

示例代码：

import { reactive, watch } from 'vue';

const data = reactive({ count: 0 });

watch(
  () => data.count,
  (newCount, oldCount) => {
    console.log('Count changed:', newCount, oldCount);
  },
  {
    immediate: true,
    deep: true,
    flush: 'sync',
    onTrack: (event) => {
      console.log('Tracked:', event);
    },
    onTrigger: (event) => {
      console.log('Triggered:', event);
    },
  }
);

// 修改数据，触发回调函数
data.count++; // 输出："Tracked:", "Triggered:", "Count changed: 1 0"

通过配置对象，你可以自定义watch监听器的行为，包括是否立即执行回调函数、是否深度监听、何时触发回调函数以及追踪数据的访问和变化。这些配置参数可以根据具体的需求来选择使用。