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