詳解Vue的監(jiān)聽(tīng)屬性
Vue監(jiān)聽(tīng)屬性
什么是監(jiān)聽(tīng)屬性？
所謂監(jiān)聽(tīng)就是對(duì)內(nèi)置對(duì)象的狀態(tài)或者屬性變化進(jìn)行監(jiān)聽(tīng)并且做出反應(yīng)的響應(yīng)，監(jiān)聽(tīng)屬性，意思就是可以監(jiān)視其他數(shù)據(jù)的變化。
監(jiān)聽(tīng)屬性和計(jì)算屬性的區(qū)別？
計(jì)算屬性是依賴(lài)的值改變后重新計(jì)算結(jié)果更新DOM，會(huì)進(jìn)行緩存。
屬性監(jiān)聽(tīng)的是屬性值，當(dāng)定義的值發(fā)生變化時(shí)，執(zhí)行相對(duì)應(yīng)的函數(shù)。
最主要的用途區(qū)別：
計(jì)算屬性不能執(zhí)行異步任務(wù)。計(jì)算屬性一般不會(huì)用來(lái)向服務(wù)器請(qǐng)求或者執(zhí)行異步任務(wù)，因?yàn)楹臅r(shí)可能會(huì)比較長(zhǎng)，我們的計(jì)算屬性要實(shí)時(shí)更新。所以這個(gè)異步任務(wù)就可以用監(jiān)聽(tīng)屬性來(lái)做。
總之一句話(huà)：computed能實(shí)現(xiàn)的，watch都能實(shí)現(xiàn)，computed不能實(shí)現(xiàn)的，watch也能實(shí)現(xiàn)
監(jiān)聽(tīng)屬性的使用
使用watch配置項(xiàng)，在配置項(xiàng)里面寫(xiě)上要監(jiān)視的屬性，每次屬性值的變化都會(huì)觸發(fā)handler函數(shù)回調(diào)，也可以監(jiān)視計(jì)算屬性的變化。
例子：
監(jiān)視輸入框的變化
代碼
<template>
<div class="main">
我:<el-input v-model="name" placeholder="請(qǐng)輸入名字"></el-input>
好友1<el-input v-model="friends.friend_1" placeholder="請(qǐng)輸入名字"></el-input>
好友2<el-input v-model="friends.friend_2" placeholder="請(qǐng)輸入名字"></el-input>
</div>
</template>
<script>
export default {
data(){
return{
name:'浪漫主義碼農(nóng)',
friends:{friend_1:'張三',friend_2:'李四'}
}
},
watch:{
name:{
handler(newValue,oldValue){ //newValue 新的值，oldValue變化前的值
console.log(newValue,oldValue)
this.friends.friend_1='王五'
}
},
//監(jiān)視多級(jí)結(jié)構(gòu)中某個(gè)屬性的變化
'friends.friend_1':{
handler(newValue,oldValue){
console.log(newValue,oldValue)
}
},
'friends.friend_2':{
handler(newValue,oldValue){
console.log(newValue,oldValue)
}
},
}
};
</script>
深度監(jiān)聽(tīng)
當(dāng)我們的對(duì)象有多層結(jié)構(gòu)的時(shí)候，我們要監(jiān)聽(tīng)的對(duì)象的屬性很多，避免一個(gè)一個(gè)屬性單獨(dú)寫(xiě)，這個(gè)時(shí)候用到深度監(jiān)聽(tīng)。
在watch配置中，監(jiān)視屬性對(duì)象中，配置deep 設(shè)置為 true 用于監(jiān)聽(tīng)多級(jí)對(duì)象或者數(shù)組內(nèi)部值的變化
watch:{
//監(jiān)視多級(jí)結(jié)構(gòu)中所有屬性的變化
friends:{
handler(newValue,oldValue){
console.log(newValue,oldValue,"aa")
},
deep:true, //開(kāi)啟深度監(jiān)聽(tīng)
}
}
注意：這里有個(gè)問(wèn)題，深度監(jiān)聽(tīng)時(shí)會(huì)出現(xiàn)新舊值相同的現(xiàn)象？
官方的解釋?zhuān)?/strong>
在變異(不是替換)對(duì)象或數(shù)組時(shí)，舊值將與新值相同，因?yàn)樗鼈兊囊弥赶蛲粋€(gè)對(duì)象/數(shù)組。Vue不會(huì)保留變異之前值的副本
就是導(dǎo)致了指針的變化。在我的js深拷貝你還不會(huì)嗎 文章里講到數(shù)據(jù)的存儲(chǔ)
立即調(diào)用
和deep配置的地方一樣。
immediate 設(shè)置為 true 將立即以觸發(fā)當(dāng)前handler回調(diào)
watch:{
name:{
handler(newValue,oldValue){ //newValue 新的值，oldValue變化前的值
console.log(newValue,oldValue)
this.friends.friend_1='王五'
},
immediate:true
},
}
在頁(yè)面加載的時(shí)候就執(zhí)行了一次，所以舊數(shù)據(jù)為undefined
總結(jié)
watch監(jiān)聽(tīng)屬性通常可以用在 數(shù)據(jù)持久化、派發(fā)事件并同步/異步執(zhí)行，驗(yàn)證格式…
本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
Element中使用ECharts的項(xiàng)目實(shí)踐
本文主要介紹了Element中使用ECharts的項(xiàng)目實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
vue如何解決代碼需要在dom渲染之后執(zhí)行問(wèn)題
這篇文章主要介紹了vue如何解決代碼需要在dom渲染之后執(zhí)行問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
前端開(kāi)發(fā)指南之vue-grid-layout的使用實(shí)例
vue-grid-layout是一個(gè)vue柵格拖動(dòng)布局的組件,下面這篇文章主要給大家介紹了關(guān)于前端開(kāi)發(fā)指南之vue-grid-layout使用的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
解決‘vue-cli-service‘不是內(nèi)部或外部命令,也不是可運(yùn)行的程序問(wèn)題
遇到'vue-cli-service'不是內(nèi)部或外部命令的錯(cuò)誤通常因?yàn)閂ueCLI未正確安裝或配置,解決步驟包括確保VueCLI全局安裝、檢查項(xiàng)目依賴(lài)、安裝項(xiàng)目依賴(lài)、清理并重新安裝依賴(lài)以及使用npm腳本調(diào)用vue-cli-service,按步驟操作后應(yīng)能解決問(wèn)題2024-11-11
這篇文章主要介紹了mpvue寫(xiě)一個(gè)CPASS小程序的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
詳解vue2如何實(shí)現(xiàn)點(diǎn)擊預(yù)覽本地文件
這篇文章主要為大家詳細(xì)介紹了vue2如何實(shí)現(xiàn)點(diǎn)擊預(yù)覽本地的word、excle、pdf文件,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04
vue項(xiàng)目中chunk-vendors.js提示報(bào)錯(cuò)的查看方法(最新推薦)
在vue項(xiàng)目中,chunk-vendors.js報(bào)出的錯(cuò)誤提示經(jīng)常會(huì)導(dǎo)致開(kāi)發(fā)者困惑,正確查看錯(cuò)誤的方法是從錯(cuò)誤提示的詳細(xì)信息中找到報(bào)錯(cuò)原因,下面給大家分享vue項(xiàng)目中chunk-vendors.js提示報(bào)錯(cuò)的查看方法,感興趣的朋友一起看看吧2024-12-12
vue?demi支持sfc方式的vue2vue3通用庫(kù)開(kāi)發(fā)詳解
這篇文章主要為大家介紹了vue?demi支持sfc方式的vue2vue3通用庫(kù)開(kāi)發(fā)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要為大家詳細(xì)介紹了Vue概念及常見(jiàn)命令，介紹了vue.js聲明式渲染、雙向綁定及常用指令,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
vue如何通過(guò)button的disabled控制按鈕能否被使用
這篇文章主要介紹了vue如何通過(guò)button的disabled控制按鈕能否被使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04