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