Vue監(jiān)聽(tīng)器簡(jiǎn)單使用及注意事項(xiàng)說(shuō)明
更新時(shí)間：2024年08月15日 09:30:47 作者：專(zhuān)注寫(xiě)bug
這篇文章主要介紹了Vue監(jiān)聽(tīng)器簡(jiǎn)單使用及注意事項(xiàng)說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
前言
監(jiān)聽(tīng)器，在官網(wǎng)中稱(chēng)為偵聽(tīng)器，個(gè)人還是喜歡稱(chēng)之為監(jiān)聽(tīng)器。
官方文檔如下：
編寫(xiě)簡(jiǎn)單demo
偵聽(tīng)器在項(xiàng)目中通常用于監(jiān)聽(tīng)某個(gè)屬性變量值的變化，并根據(jù)該變化做出一些處理操作。
最簡(jiǎn)單的案例如下所示：
<template>
<h1>偵聽(tīng)器</h1>
<p>{{ msg }}</p>
<button @click="changeMsgHandler">點(diǎn)擊一下 就送屠龍寶刀</button>
</template>
<script>
export default{
data(){
return{
msg:"專(zhuān)注寫(xiě) bug"
}
},
methods:{
changeMsgHandler(){
var newMessage = this.msg.split('').reverse().join('');
this.msg = newMessage;
}
},
// 偵聽(tīng)器
watch:{
// 監(jiān)聽(tīng)器的名稱(chēng)必須與被監(jiān)聽(tīng)的屬性名稱(chēng)保持一致
msg(newVal,oldVal){
console.log("newVal===>"+newVal);
console.log("oldVal===>"+oldVal);
}
}
}
</script>頁(yè)面初次加載時(shí)，頁(yè)面中顯示效果如下所示：
當(dāng)按鈕點(diǎn)擊后，頁(yè)面與控制臺(tái)中的信息如下所示：
注意事項(xiàng)
對(duì)某個(gè)變量進(jìn)行偵聽(tīng)變化時(shí)，需要使用到watch選項(xiàng)。
偵聽(tīng)器watch中的方法名必須與實(shí)際變量名稱(chēng)保值一致，否則會(huì)出現(xiàn)無(wú)法偵聽(tīng)的問(wèn)題。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue 部署上線清除瀏覽器緩存的方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vite的常見(jiàn)配置選項(xiàng)詳細(xì)說(shuō)明
相信大部分兄弟都體驗(yàn)過(guò)Vite了,都知道它很快,在學(xué)習(xí)的時(shí)候,官網(wǎng)上的各種配置也是看的眼花繚亂,不知道哪些是必要掌握的,下面這篇文章主要給大家介紹了關(guān)于Vite常見(jiàn)配置選項(xiàng)的相關(guān)資料,需要的朋友可以參考下2024-09-09
解決Vue 項(xiàng)目打包后favicon無(wú)法正常顯示的問(wèn)題
今天小編就為大家分享一篇解決Vue 項(xiàng)目打包后favicon無(wú)法正常顯示的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue生命周期activated之返回上一頁(yè)不重新請(qǐng)求數(shù)據(jù)操作
這篇文章主要介紹了Vue生命周期activated之返回上一頁(yè)不重新請(qǐng)求數(shù)據(jù)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
antd日期選擇器禁止選擇當(dāng)天之前的時(shí)間操作
這篇文章主要介紹了antd日期選擇器禁止選擇當(dāng)天之前的時(shí)間操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
這篇文章主要介紹了Vue中自定義日志打印插件問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue實(shí)現(xiàn)按鈕的長(zhǎng)按功能
這篇文章主要介紹了vue實(shí)現(xiàn)按鈕的長(zhǎng)按功能,點(diǎn)擊按鈕實(shí)現(xiàn)長(zhǎng)按，用戶(hù)需要按下按鈕幾秒鐘，然后觸發(fā)相應(yīng)的事件，本文通過(guò)實(shí)例代碼給大家分享實(shí)現(xiàn)思路，感興趣的朋友一起看看吧2022-01-01
這篇文章主要介紹了vue3.0-monaco組件封裝存檔代碼解析,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03
快速解決 keep-alive 緩存組件中定時(shí)器干擾問(wèn)題
文章介紹了在使用keep-alive緩存組件時(shí),如何在組件被緩存后清理定時(shí)器以避免干擾其他組件的邏輯,通過(guò)在deactivated鉤子中清理定時(shí)器,可以確保組件被緩存時(shí)不會(huì)繼續(xù)運(yùn)行定時(shí)器,感興趣的朋友一起看看吧2025-02-02
前端vue2?element?ui高效配置化省時(shí)又省力
這篇文章主要為大家介紹了前端高效配置化vue2?element?ui省時(shí)又省力,有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07