Vue之監(jiān)聽(tīng)方法案例詳解
vue中的監(jiān)聽(tīng)方法
watch
注意
名字 你想監(jiān)聽(tīng)哪個(gè)屬性，就要和他起一樣的名字
1.作用
用來(lái)監(jiān)聽(tīng)vue實(shí)例中的數(shù)據(jù)變化
可以隨時(shí)修改狀態(tài)的變化
2.觸發(fā)條件
當(dāng)你監(jiān)聽(tīng)的屬性發(fā)生變化時(shí)，會(huì)自動(dòng)調(diào)用對(duì)應(yīng)的監(jiān)聽(tīng)方法
3.使用場(chǎng)景
用于異步處理，開(kāi)銷比較大的運(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)聽(tīng)對(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)聽(tīng)對(duì)象的時(shí)候，需要加deep:true，這樣才能深入底層去實(shí)時(shí)監(jiān)聽(tīng)，如果沒(méi)有加的話，對(duì)象是監(jiān)聽(tīng)不到變化的。
immediate屬性：布爾值
immediate：true：首次加載就監(jiān)聽(tīng)數(shù)據(jù)變化
immediate：false：只有發(fā)生改變才監(jiān)聽(tīng)
deep:true；
是開(kāi)啟深層次的監(jiān)聽(tīng)，即所有屬性都加上監(jiān)聽(tīng)器，如果其中一個(gè)發(fā)生改變了就執(zhí)行handler函數(shù)。
到此這篇關(guān)于Vue之監(jiān)聽(tīng)方法案例詳解的文章就介紹到這了,更多相關(guān)Vue之監(jiān)聽(tīng)方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue函數(shù)@click.prevent的使用解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
隨著前端的快速發(fā)展，非常多的js框架被應(yīng)用到項(xiàng)目中。Vue.js本身支持對(duì)組件的異步加載,配合Webpack的分塊打包功能,可以極其輕松地實(shí)現(xiàn)組件的異步按需加載。 這篇文章是webpack+vue.j的入門教程，有需要的可以參考借鑒。2016-10-10
Vue + OpenLayers 快速入門學(xué)習(xí)教程
大家都知道使用 Openlayers可以很靈活自由的做出各種地圖和空間數(shù)據(jù)的展示。而且這個(gè)框架是完全免費(fèi)和開(kāi)源的，本文記錄下 Vue 使用 OpenLayers 入門，使用 OpenLayers 創(chuàng)建地圖組件的相關(guān)知識(shí)，需要的朋友一起學(xué)習(xí)下吧2021-09-09
Vue實(shí)現(xiàn)固定定位圖標(biāo)滑動(dòng)隱藏效果
移動(dòng)端頁(yè)面，有時(shí)候會(huì)出現(xiàn)一些固定定位在底部圖標(biāo)，比如購(gòu)物車等。這篇文章主要介紹了Vue制作固定定位圖標(biāo)滑動(dòng)隱藏效果,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了vant-image本地圖片無(wú)法顯示的解決方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue中el-table實(shí)現(xiàn)無(wú)限向下滾動(dòng)懶加載數(shù)據(jù)
一次性的加載全部的數(shù)據(jù),并且將其渲染到頁(yè)面上,就會(huì)導(dǎo)致頁(yè)面卡頓,往往采用分頁(yè)和無(wú)限滾動(dòng)的方式來(lái)展示,本文主要介紹了vue中el-table實(shí)現(xiàn)無(wú)限向下滾動(dòng)懶加載數(shù)據(jù),感興趣的可以了解一下2023-12-12
vue項(xiàng)目設(shè)置打包后的靜態(tài)文件訪問(wèn)路徑
這篇文章主要介紹了vue項(xiàng)目設(shè)置打包后的靜態(tài)文件訪問(wèn)路徑,vue項(xiàng)目的最終項(xiàng)目文件需要經(jīng)過(guò)打包輸出,靜態(tài)文件的訪問(wèn)路徑需要在vue.config.js文件中設(shè)置,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
解讀vue生成的文件目錄結(jié)構(gòu)及說(shuō)明
本篇文章主要介紹了解讀vue生成的文件目錄結(jié)構(gòu)及說(shuō)明，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
本篇文章主要介紹了Vue計(jì)算屬性的使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
vscode開(kāi)發(fā)vue非常好用,因?yàn)橛泻芏嗟牟寮?可以補(bǔ)全語(yǔ)法,或者高亮便于檢查錯(cuò)誤,但我最近發(fā)現(xiàn)我的vscode卻沒(méi)有了代碼提示,這篇文章主要給大家介紹了關(guān)于VSCode中書寫Vue無(wú)代碼提示該如何解決的相關(guān)資料,需要的朋友可以參考下2022-12-12