Vue3中watch的用法

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

watch 和watchEffect

watchEffect 函数：

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

?

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

　　示例代码：

?

1 2 3 4 5 6 7 8 9 10

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

　　2. watch 函数：

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

?

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

　　

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

?

1 2 3 4 5 6 7 8 9 10

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监听器的行为，包括是否立即执行回调函数、是否深度监听、何时触发回调函数以及追踪数据的访问和变化。这些配置参数可以根据具体的需求来选择使用。