学习Vue3第十一章（认识watchEffect高级侦听器）

watchEffect

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

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

let message &＃61; ref(&＃39;&＃39;)
let message2 &＃61; ref(&＃39;&＃39;)watchEffect(() &＃61;> {//console.log(&＃39;message&＃39;, message.value);console.log(&＃39;message2&＃39;, message2.value);
})

清除副作用

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

import { watchEffect, ref } from &＃39;vue&＃39;
let message &＃61; ref(&＃39;&＃39;)
let message2 &＃61; ref(&＃39;&＃39;)watchEffect((oninvalidate) &＃61;> {//console.log(&＃39;message&＃39;, message.value);oninvalidate(()&＃61;>{})console.log(&＃39;message2&＃39;, message2.value);
})

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

const stop &＃61; watchEffect((oninvalidate) &＃61;> {//console.log(&＃39;message&＃39;, message.value);oninvalidate(()&＃61;>{})console.log(&＃39;message2&＃39;, message2.value);
},{flush:"post",onTrigger () {}
})
stop()

更多的配置项

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

onTrigger  可以帮助我们调试 watchEffect

import { watchEffect, ref } from &＃39;vue&＃39;
let message &＃61; ref(&＃39;&＃39;)
let message2 &＃61; ref(&＃39;&＃39;)watchEffect((oninvalidate) &＃61;> {//console.log(&＃39;message&＃39;, message.value);oninvalidate(()&＃61;>{})console.log(&＃39;message2&＃39;, message2.value);
},{flush:"post",onTrigger () {}
})