Vue3中watch的用法
在Vue3中，watch 选项的用法与之前版本的Vue略有不同。Vue3中使用了Composition API，在组合式API中，watch 选项被替换成了一个新的函数 watchEffect 和一个新的函数 watch。下面是关于 watchEffect 和 watch 的用法说明：
watch 和watchEffect
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监听器的行为，包括是否立即执行回调函数、是否深度监听、何时触发回调函数以及追踪数据的访问和变化。这些配置参数可以根据具体的需求来选择使用。
