Vue3中watchEffect高級偵聽器的具體使用
更新時間：2024年01月21日 11:54:17 作者：Unique·Blue
Vue3中新增了一種特殊的監(jiān)聽器watchEffect,本文主要介紹了Vue3中watchEffect高級偵聽器的具體使用,具有一定的參考價值,感興趣的可以了解一下
示例均采用 <script setup>，且包含 typescript 的基礎(chǔ)用法
前言
Vue3 中新增了一種特殊的監(jiān)聽器 watchEffect，它的類型是：
function watchEffect( effect: (onCleanup: OnCleanup) => void, options?: WatchEffectOptions ): StopHandle
下面通過實(shí)例來理解下它的用法
一、簡單使用
- 第一個參數(shù)就是要運(yùn)行的
副作用函數(shù) effect - 函數(shù)內(nèi)
用到哪些數(shù)據(jù)才會監(jiān)聽哪些數(shù)據(jù) - 且會
立刻執(zhí)行一次（immediate）
<input type="text" v-model="message1" /> <br /> <input type="text" v-model="message2" /> <br />
import { ref, watchEffect } from "vue";
const message1 = ref<string>("飛機(jī)");
const message2 = ref<string>("火車");
watchEffect(() => {
console.log("message1========>,", message1);
// 不使用 message2 就不會監(jiān)聽 message2
// console.log("message2========>,", message2);
});
二、副作用 effect 的參數(shù)
- effect 的參數(shù) 也是一個
函數(shù)，用來注冊清理回調(diào)。 清理回調(diào)會在該副作用下一次執(zhí)行前被調(diào)用，可以用來清理無效的副作用，例如等待中的異步請求
<input type="text" v-model="message1" /> <br /> <input type="text" v-model="message2" /> <br />
import { ref, watchEffect } from "vue";
const message1 = ref<string>("飛機(jī)");
const message2 = ref<string>("火車");
watchEffect((onCleanup) => {
console.log("message11111========>,", message1);
console.log("message22222========>,", message2);
onCleanup(() => {
console.log("onCleanup —————— 下一次運(yùn)行之前要做的事");
});
});
頁面刷新，首次打?。?/h3>
更改輸入框的值，再次打?。?/h3>
三、watchEffect 返回值
- 返回值是一個用來
停止偵聽器的函數(shù)，調(diào)用后不再偵聽 - 需要注意的是：停止時，
不影響最后一次 onCleanup 的執(zhí)行
<input type="text" v-model="message1" /> <br /> <input type="text" v-model="message2" /> <br /> <button @click="stopWatch">停止watchEffect</button>
const stop = watchEffect((onCleanup) => {
console.log("message11111========>,", message1);
console.log("message22222========>,", message2);
onCleanup(() => {
console.log("onCleanup —————— 下一次運(yùn)行之前要做的事");
});
});
const stopWatch = () => {
stop();
};
頁面刷新，首次打?。?/h3>
更改輸入框的值，再次打?。?/h3>
點(diǎn)擊按鈕 停止偵聽，再次打?。?/h3>
四、options配置
watchEffect 的第二個參數(shù)是配置項(xiàng)：
flush：watch 的執(zhí)行順序pre|post|sync，默認(rèn)：pre，具體含義可以看上一篇 watch 中的解釋- 一般需要在 dom 更新之后再獲取的情況，可以設(shè)置為
post
onTrack用于開發(fā)環(huán)境調(diào)試onTrigger用于開發(fā)環(huán)境調(diào)試
<input id="ipt" v-model="iptVal" />
const iptVal = ref<string>("aa");
watchEffect(
() => {
// 測試 flush
const spanEle = document.getElementById("ipt");
// flush = pre 時，打印 null; flush = post 時，打印節(jié)點(diǎn)
console.log("spanEle========>,", spanEle);
// 修改 iptVal 測試 onTrack、onTrigger
console.log("iptVal============>", iptVal.value);
},
{
flush: "post",
// 收集依賴時觸發(fā)
onTrack: () => {
debugger;
},
// 更新時觸發(fā)
onTrigger: () => {
debugger;
},
}
);
五、周邊 api
watchPostEffect()：watchEffect()使用flush: 'post'選項(xiàng)時的別名watchSyncEffect()：watchEffect()使用flush: 'sync'選項(xiàng)時的別名
到此這篇關(guān)于Vue3中watchEffect高級偵聽器的具體使用的文章就介紹到這了,更多相關(guān)Vue3 watchEffect高級偵聽器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue3頭像上傳組件功能,用到了自定義組件v-model的雙向綁定，使用axios + formData 上傳文件，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-05-05
vue+element?DatePicker實(shí)現(xiàn)日期選擇器封裝
Vue?Element?DatePicker是一款基于Vue.js的日期選擇控件，它提供了豐富的日期選擇功能，支持日期范圍選擇、日期格式化、自定義日期格式、快捷選擇等功能，極大地提高了用戶的體驗(yàn)，是開發(fā)者必備的日期選擇控件。2023-02-02
這篇文章主要介紹了如何使用 vue + d3 畫一棵樹,本文通過文字說明加代碼分析的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-12-12
vue2.0實(shí)現(xiàn)移動端的輸入框?qū)崟r檢索更新列表功能
最近小編在做vue2.0的項(xiàng)目，遇到移動端實(shí)時檢索搜索更新列表的效果，下面腳本之家小編給大家?guī)砹藇ue2.0 移動端的輸入框?qū)崟r檢索更新列表功能的實(shí)例代碼，感興趣的朋友參考下吧2018-05-05
vue使用canvas畫布實(shí)現(xiàn)平面圖點(diǎn)位標(biāo)注功能(最新推薦)
這篇文章主要介紹了vue使用canvas畫布實(shí)現(xiàn)平面圖點(diǎn)位標(biāo)注功能,經(jīng)過本文一番研究發(fā)現(xiàn)canvas標(biāo)簽可以完成很多功能，電子簽名，點(diǎn)位標(biāo)注，問題標(biāo)注，畫圖功能，感興趣的朋友跟隨小編一起看看吧2023-07-07
詳解vuex中mutations方法的使用與實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了vuex中mutations方法的使用與實(shí)現(xiàn)的相關(guān)知識,文中的示例代碼簡潔易懂,具有一定的學(xué)習(xí)價值,感興趣的小伙伴可以跟隨小編一起了解一下2023-11-11
這篇文章主要介紹了vue番茄鐘與electron?打包問題，本文通過實(shí)例結(jié)合相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-06-06
在?Vue3.x?中,組件間的參數(shù)傳遞是構(gòu)建復(fù)雜應(yīng)用時不可或缺的一部分,無論是父子組件還是兄弟組件之間,合理的數(shù)據(jù)流動都是保持應(yīng)用狀態(tài)一致性和可維護(hù)性的關(guān)鍵,本文將通過示例代碼,詳細(xì)介紹?Vue3.x?中組件間如何傳遞參數(shù),需要的朋友可以參考下2024-03-03
使用vue編寫一個點(diǎn)擊數(shù)字計(jì)時小游戲
這篇文章主要為大家詳細(xì)介紹了使用vue編寫一個點(diǎn)擊數(shù)字計(jì)時小游戲，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要給大家介紹了關(guān)于Vue全局變量的定義及使用的相關(guān)資料,定義完全局變量后,我們可以在程序中的任何地方使用它們,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09