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