Vue之監(jiān)聽方法案例詳解
vue中的監(jiān)聽方法
watch
注意
名字 你想監(jiān)聽哪個(gè)屬性，就要和他起一樣的名字
1.作用
用來監(jiān)聽vue實(shí)例中的數(shù)據(jù)變化
可以隨時(shí)修改狀態(tài)的變化
2.觸發(fā)條件
當(dāng)你監(jiān)聽的屬性發(fā)生變化時(shí)，會(huì)自動(dòng)調(diào)用對(duì)應(yīng)的監(jiān)聽方法
3.使用場(chǎng)景
用于異步處理，開銷比較大的運(yùn)算
4.示例
watch:{
name(newvalue,oldvalue){
//計(jì)算屬性可以接受兩個(gè)參數(shù),第一個(gè)參數(shù)是新的屬性值,第二參數(shù)是老的屬性值
// this.age
// console.log('name屬性發(fā)生變化了')
console.log(newvalue,oldvalue)
}
5.監(jiān)聽對(duì)象時(shí)
<script>
export default {
data() {
return {
obj: {
name: "張三",
age: 20,
children: [
{
name: "李四",
age: 27
},
{
name: "王五",
age: 23
}
]
}
};
},
watch: {
obj: {
handler: function(newVal, oldVal) {
console.log("newVal:", newVal);
console.log("oldVal:", oldVal);
},
deep: true,
immediate: true
},
"obj.name": function(newVal, oldVal) {
console.log("newVal obj.name:", newVal);
console.log("oldVal obj.name:", oldVal);
}
},
};
</script>
監(jiān)聽對(duì)象的時(shí)候，需要加deep:true，這樣才能深入底層去實(shí)時(shí)監(jiān)聽，如果沒有加的話，對(duì)象是監(jiān)聽不到變化的。
immediate屬性：布爾值
immediate：true：首次加載就監(jiān)聽數(shù)據(jù)變化
immediate：false：只有發(fā)生改變才監(jiān)聽
deep:true；
是開啟深層次的監(jiān)聽，即所有屬性都加上監(jiān)聽器，如果其中一個(gè)發(fā)生改變了就執(zhí)行handler函數(shù)。
到此這篇關(guān)于Vue之監(jiān)聽方法案例詳解的文章就介紹到這了,更多相關(guān)Vue之監(jiān)聽方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue簡(jiǎn)易注冊(cè)頁面+發(fā)送驗(yàn)證碼功能的實(shí)現(xiàn)示例
本文主要介紹了Vue簡(jiǎn)易注冊(cè)頁面+發(fā)送驗(yàn)證碼功能的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
vue項(xiàng)目中canvas實(shí)現(xiàn)截圖功能
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目中canvas實(shí)現(xiàn)截圖功能，截取圖片的一部分，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
Vue使用xlsx插件導(dǎo)出excel文件的詳細(xì)指南
第三方庫(kù)xlsx提供了強(qiáng)大的功能來處理Excel文件,它可以簡(jiǎn)化導(dǎo)出Excel文件這個(gè)過程,下面小編就來為大家詳細(xì)講講Vue如何通過xlsx導(dǎo)出excel,需要的小伙伴可以了解下2025-04-04
vue中使用Echarts?map圖實(shí)現(xiàn)下鉆至縣級(jí)的思路詳解
這篇文章主要介紹了vue中使用Echarts?map圖實(shí)現(xiàn)下鉆至縣級(jí),需要注意的是，因?yàn)槲沂侵苯訌?vue-cli2?直接跳到?vue-cli4?，還奇怪怎么讀取不到JSON，查找后才知道?vue-cli3?往后的項(xiàng)目基礎(chǔ)架構(gòu)對(duì)比舊版本有些區(qū)別，感興趣的朋友跟隨小編一起看看吧2022-01-01
Vuex中實(shí)現(xiàn)數(shù)據(jù)狀態(tài)查詢與更改
今天小編就為大家分享一篇Vuex中實(shí)現(xiàn)數(shù)據(jù)狀態(tài)查詢與更改，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
圖片和文件上傳在很多項(xiàng)目中都可以使用的到，本文主要介紹了VUE+element-ui文件上傳的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue組件數(shù)據(jù)傳遞、父子組件數(shù)據(jù)獲取，slot,router路由功能示例
這篇文章主要介紹了vue組件數(shù)據(jù)傳遞、父子組件數(shù)據(jù)獲取，slot,router路由功能,結(jié)合實(shí)例形式分析了vue.js組件數(shù)據(jù)傳遞、路由相關(guān)概念、原理及相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
這篇文章主要介紹了vue過濾器實(shí)現(xiàn)日期格式化的案例分析，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
在現(xiàn)代Web應(yīng)用開發(fā)中,異步操作是常見的挑戰(zhàn),本文介紹了Vue3中管理多個(gè)異步操作的方法,幫助開發(fā)者提高編碼效率和應(yīng)用性能,感興趣的朋友跟隨小編一起看看吧2024-09-09
Vue優(yōu)化:常見會(huì)導(dǎo)致內(nèi)存泄漏問題及優(yōu)化詳解
這篇文章主要介紹了Vue優(yōu)化:常見會(huì)導(dǎo)致內(nèi)存泄漏問題及優(yōu)化詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08