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

更新時間：2024年07月24日 08:46:47 作者：努力學習~沖鴨

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

vue watch同時監(jiān)聽多個屬性

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

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

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

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
        }
    }
}

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

使用 computed 和 watch 監(jiān)聽相結合的方式（推薦）：

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
        }
    }
}

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

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

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