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