快捷導(dǎo)航

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

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

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

vue watch同時(shí)監(jiān)聽多個(gè)屬性

1. watch監(jiān)聽的多個(gè)屬性之間沒有聯(lián)系（name、list），各自監(jiān)聽值改變后執(zhí)行各自的方法，也無關(guān)順序問題；

watch:{
    name(newValue, oldValue) {
        this.name = newValue
    },
    list(newVal, oldVal) {
        this.list = newVal
    }
}

2. watch監(jiān)聽的多個(gè)屬性之間相互有聯(lián)系（useableCardTypeTime、tableData），并且任何一個(gè)值改變都有可能對第三個(gè)值（addDisable）產(chǎn)生改變，所以監(jiān)聽兩個(gè)屬性的方法中都需要寫對第三個(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
        }
    }
}

對于以上多個(gè)屬性之間有關(guān)聯(lián)的問題，還有一個(gè)更為簡便的方式來解決，即：

使用 computed 和 watch 監(jiān)聽相結(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
        }
    }
}

對于項(xiàng)目中需要一次性監(jiān)聽多個(gè)屬性值的變化時(shí)，推薦大家使用最后一種方式喔~~~（computed 和 watch 相結(jié)合）

vue watch深度監(jiān)聽多個(gè)屬性實(shí)例

watch :{
    //監(jiān)聽type的變化
    'temp.type': {
      handler(type,old) {
        //這里寫你的業(yè)務(wù)邏輯
        console.log('obj.a changed', type);
        if (type == 1) {
           this.temp.title  = '速來↓↓↓'
        } else {
           this.temp.title  = ''
        }
      },
      immediate: true,
      // deep: true
    },
    'temp.liveName': {
      handler(liveName,old) {
        //這里寫你的業(yè)務(wù)邏輯
        console.log('obj.a changed', liveName);
        if (this.temp.type == 1) {
          this.temp.title = " 速來↓↓↓"
 
        }
      },
      immediate: true,
      // deep: true
    }
  },