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