vue中watch如何同時(shí)監(jiān)聽(tīng)多個(gè)屬性
vue watch同時(shí)監(jiān)聽(tīng)多個(gè)屬性
1. watch監(jiān)聽(tīng)的多個(gè)屬性之間沒(méi)有聯(lián)系(name、list),各自監(jiān)聽(tīng)值改變后執(zhí)行各自的方法,也無(wú)關(guān)順序問(wèn)題;
watch:{
name(newValue, oldValue) {
this.name = newValue
},
list(newVal, oldVal) {
this.list = newVal
}
}2. watch監(jiān)聽(tīng)的多個(gè)屬性之間相互有聯(lián)系(useableCardTypeTime、tableData),并且任何一個(gè)值改變都有可能對(duì)第三個(gè)值(addDisable)產(chǎn)生改變,所以監(jiān)聽(tīng)兩個(gè)屬性的方法中都需要寫(xiě)對(duì)第三個(gè)值的改變操作;
watch:{
useableCardTypeTime(newValue, oldValue) {
if(this.tableData.length >= newValue.length) {
this.addDisable = true
} else {
this.addDisable = false
}
},
tableData(newVal, oldVal) {
if(newVal.length >= this.useableCardTypeTime.length) {
this.addDisable = true
} else {
this.addDisable = false
}
}
}對(duì)于以上多個(gè)屬性之間有關(guān)聯(lián)的問(wèn)題,還有一個(gè)更為簡(jiǎn)便的方式來(lái)解決,即:
使用 computed 和 watch 監(jiān)聽(tīng)相結(jié)合的方式(推薦):
computed: {
listenChange () {
const { useableCardTypeTime, tableData } = this
return { useableCardTypeTime, tableData }
}
},
watch:{
listenChange (val) {
if(val.tableData.length >= val.useableCardTypeTime.length) {
this.addDisable = true
} else {
this.addDisable = false
}
}
}對(duì)于項(xiàng)目中需要一次性監(jiān)聽(tīng)多個(gè)屬性值的變化時(shí),推薦大家使用最后一種方式喔~~~(computed 和 watch 相結(jié)合)
vue watch深度監(jiān)聽(tīng)多個(gè)屬性實(shí)例
watch :{
//監(jiān)聽(tīng)type的變化
'temp.type': {
handler(type,old) {
//這里寫(xiě)你的業(yè)務(wù)邏輯
console.log('obj.a changed', type);
if (type == 1) {
this.temp.title = '速來(lái)↓↓↓'
} else {
this.temp.title = ''
}
},
immediate: true,
// deep: true
},
'temp.liveName': {
handler(liveName,old) {
//這里寫(xiě)你的業(yè)務(wù)邏輯
console.log('obj.a changed', liveName);
if (this.temp.type == 1) {
this.temp.title = " 速來(lái)↓↓↓"
}
},
immediate: true,
// deep: true
}
},watch中的immediate、handler和deep屬性
(1)immediate和handler
這樣使用watch時(shí)有一個(gè)特點(diǎn),就是當(dāng)值第一次綁定時(shí),不會(huì)執(zhí)行監(jiān)聽(tīng)函數(shù),只有值發(fā)生改變時(shí)才會(huì)執(zhí)行。
如果我們需要在最初綁定值的時(shí)候也執(zhí)行函數(shù),則就需要用到immediate屬性。
(2)deep
當(dāng)需要監(jiān)聽(tīng)一個(gè)對(duì)象的改變時(shí),普通的watch方法無(wú)法監(jiān)聽(tīng)到對(duì)象內(nèi)部屬性的改變,此時(shí)就需要deep屬性對(duì)對(duì)象進(jìn)行深度監(jiān)聽(tīng)。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- vue?watch監(jiān)聽(tīng)方法總結(jié)
- Vue使用watch監(jiān)聽(tīng)一個(gè)對(duì)象中的屬性的實(shí)現(xiàn)方法
- Vue使用watch監(jiān)聽(tīng)數(shù)組或?qū)ο?/a>
- Vue數(shù)據(jù)監(jiān)聽(tīng)方法watch的使用
- VUE3中watch監(jiān)聽(tīng)使用實(shí)例詳解
- vue中watch監(jiān)聽(tīng)器的觸發(fā)時(shí)機(jī)(watch的坑及解決)
- vue中watch監(jiān)聽(tīng)不到變化的解決
- 詳解Vue3中Watch監(jiān)聽(tīng)事件的使用
- vue監(jiān)聽(tīng)屬性watch的用法及使用場(chǎng)景詳解
相關(guān)文章
Vue3父子組件表單滾動(dòng)到校驗(yàn)錯(cuò)誤的位置實(shí)現(xiàn)過(guò)程
文章介紹了如何在包含父表單和多個(gè)子表單的場(chǎng)景中,通過(guò)滾動(dòng)方法實(shí)現(xiàn)提交時(shí)的校驗(yàn)機(jī)制,確保數(shù)據(jù)完整性與用戶(hù)操作體驗(yàn)2025-07-07
Vue.js使用v-show和v-if的注意事項(xiàng)
這篇文章一開(kāi)始先對(duì)Vue.js中v-show和v-if兩者的區(qū)別進(jìn)行了簡(jiǎn)單的介紹,而后通過(guò)圖文詳細(xì)給大家介紹了Vue.js使用v-show和v-if注意的事項(xiàng),有需要的朋友們可以參考借鑒,下面來(lái)一起看看吧。2016-12-12
Vue echarts畫(huà)甘特圖流程詳細(xì)講解
這篇文章主要介紹了Vue echarts畫(huà)甘特圖流程,甘特圖(Gantt chart)又稱(chēng)為橫道圖、條狀圖(Bar chart)。其通過(guò)條狀圖來(lái)顯示項(xiàng)目、進(jìn)度和其他時(shí)間相關(guān)的系統(tǒng)進(jìn)展的內(nèi)在關(guān)系隨著時(shí)間進(jìn)展的情況2022-09-09
使用mint-ui開(kāi)發(fā)項(xiàng)目的一些心得(分享)
下面小編就為大家?guī)?lái)一篇使用mint-ui開(kāi)發(fā)項(xiàng)目的一些心得(分享)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
使用Vue.set()方法實(shí)現(xiàn)響應(yīng)式修改數(shù)組數(shù)據(jù)步驟
今天小編就為大家分享一篇使用Vue.set()方法實(shí)現(xiàn)響應(yīng)式修改數(shù)組數(shù)據(jù)步驟,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
ElementUI+命名視圖實(shí)現(xiàn)復(fù)雜頂部和左側(cè)導(dǎo)航欄
本文主要介紹了ElementUI+命名視圖實(shí)現(xiàn)復(fù)雜頂部和左側(cè)導(dǎo)航欄,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04

