快捷導(dǎo)航

vue中watch如何同時(shí)監(jiān)聽(tīng)多個(gè)屬性

更新時(shí)間：2024年07月24日 08:46:47 作者：努力學(xué)習(xí)~沖鴨

這篇文章主要介紹了vue中watch如何同時(shí)監(jiān)聽(tīng)多個(gè)屬性,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

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)。