vue+ts 第八章（认识watchEffect高级侦听器）

本文链接：https://blog.youkuaiyun.com/lipenghao111/article/details/137201870

这篇文章介绍了Vue中的watchEffect函数，用于创建响应式函数，监听依赖并自动重运行。它还讨论了如何清除副作用、控制刷新时机（如flush选项）以及onTrigger辅助调试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

watchEffect

立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。

如果用到message 就只会监听message 就是用到几个监听几个而且是非惰性会默认调用一次

let message = ref<string>('')
let message2 = ref<string>('')
watchEffect(() => {
//console.log('message', message.value);
console.log('message2', message2.value);
})

清除副作用

就是在触发监听之前会调用一个函数可以处理你的逻辑例如防抖

import { watchEffect, ref } from 'vue'
let message = ref<string>('')
let message2 = ref<string>('')
watchEffect((oninvalidate) => {
//console.log('message', message.value);
oninvalidate(()=>{

})
console.log('message2', message2.value);
})

停止跟踪 watchEffect 返回一个函数调用之后将停止更新

const stop = watchEffect((oninvalidate) => {
//console.log('message', message.value);
oninvalidate(()=>{

})
console.log('message2', message2.value);
},{
flush:"post",
onTrigger () {

}
})
stop()

更多的配置项

副作用刷新时机 flush 一般使用post

	pre	sync	post
更新时机	组件更新前执行	强制效果始终同步触发	组件更新后执行

onTrigger 可以帮助我们调试 watchEffect

import { watchEffect, ref } from 'vue'
let message = ref<string>('')
let message2 = ref<string>('')
watchEffect((oninvalidate) => {
//console.log('message', message.value);
oninvalidate(()=>{

})
console.log('message2', message2.value);
},{
flush:"post",
onTrigger () {

}
})