vue3中WatchEffect高級(jí)偵聽器的實(shí)現(xiàn)
更新時(shí)間：2025年01月13日 11:01:22 作者：孫懟懟啊
本文主要介紹了vue3中WatchEffect高級(jí)偵聽器的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
這個(gè)作為一個(gè)知識(shí)點(diǎn)補(bǔ)充吧，不多介紹了累了，直接上代碼有注釋，自己看
基礎(chǔ)用法
let message = ref<string>('飛機(jī)')
let message2 = ref<string>('杯子')
watchEffect((oninvalidate) => {
// 加載的第一次就直接監(jiān)聽
console.log('message--', message.value);
console.log('message2--', message2.value);
})
可以手動(dòng)暫停監(jiān)聽
let message = ref<string>('飛機(jī)')
let message2 = ref<string>('杯子')
// stop為一個(gè)函數(shù)，通過調(diào)用可以停止監(jiān)聽
const stop = watchEffect((oninvalidate) => {
// 加載的第一次就直接監(jiān)聽
console.log('message--', message.value);
console.log('message2--', message2.value);
// oninvalidate清除一些副作用，會(huì)優(yōu)先調(diào)用這個(gè)回調(diào)函數(shù)
oninvalidate(() => {
console.log('before');
})
})
const stopWatch = () => stop()
配置項(xiàng)
// stop為一個(gè)函數(shù)，通過調(diào)用可以停止監(jiān)聽
const stop = watchEffect((oninvalidate) => {
let ipt: HTMLInputElement = document.querySelector('#ipt') as HTMLInputElement
console.log('ipt元素', ipt);
// oninvalidate清除一些副作用，會(huì)優(yōu)先調(diào)用這個(gè)回調(diào)函數(shù)
oninvalidate(() => {
console.log('before');
})
}, {
// 組件更新后觸發(fā)監(jiān)聽
flush: 'post',
// 開發(fā)環(huán)境幫助調(diào)試
onTrigger(e) {
console.log('onTrigger---', e);
}
})到此這篇關(guān)于vue3中WatchEffect高級(jí)偵聽器的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue3 WatchEffect高級(jí)偵聽器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue-admin-template框架搭建及應(yīng)用小結(jié)
?vue-admin-template是基于vue-element-admin的一套后臺(tái)管理系統(tǒng)基礎(chǔ)模板（最少精簡版），可作為模板進(jìn)行二次開發(fā)，這篇文章主要介紹了vue-admin-template框架搭建及應(yīng)用,需要的朋友可以參考下2023-05-05
Vue2中的高復(fù)用組件通常是指那些設(shè)計(jì)得足夠通用,并能多次在項(xiàng)目中重復(fù)使用的組件,本文給大家詳細(xì)介紹了vue2創(chuàng)建高復(fù)用組件的方法示例,并通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-07-07
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)圖片切換功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要為大家介紹了Vue的鍵盤事件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
這篇文章主要介紹了vue實(shí)現(xiàn)城市列表選擇功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07
vue+elementUI用戶修改密碼的前端驗(yàn)證規(guī)則
用戶登錄后修改密碼,密碼需要一定的驗(yàn)證規(guī)則,這篇文章主要介紹了vue+elementUI用戶修改密碼的前端驗(yàn)證,需要的朋友可以參考下2024-03-03
vue3實(shí)現(xiàn)在新標(biāo)簽中打開指定網(wǎng)址的方法
我希望點(diǎn)擊查看按鈕的時(shí)候,能夠在新的標(biāo)簽頁面打開這個(gè)文件的地址進(jìn)行預(yù)覽,該如何實(shí)現(xiàn)呢,下面小編給大家?guī)砹嘶趘ue3實(shí)現(xiàn)在新標(biāo)簽中打開指定的網(wǎng)址,感興趣的朋友跟隨小編一起看看吧2024-07-07
解決Vue中的生命周期beforeDestory不觸發(fā)的問題
這篇文章主要介紹了解決Vue中的生命周期beforeDestory不觸發(fā)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
詳解Vue 項(xiàng)目中的幾個(gè)實(shí)用組件（ts）
這篇文章主要介紹了詳解Vue 項(xiàng)目中的幾個(gè)實(shí)用組件（ts），文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
vue使用監(jiān)聽實(shí)現(xiàn)全選反選功能
最近做的項(xiàng)目用到了全選全不選功能，于是我就自己動(dòng)手寫了一個(gè)，基于vue使用監(jiān)聽實(shí)現(xiàn)全選反選功能，具體實(shí)例代碼大家參考下本文2018-07-07