vue中watch同时监听多个属性问题

1. watch监听的多个属性之间没有联系（name、list），各自监听值改变后执行各自的方法，也无关顺序问题；watch:{name(newValue, oldValue) {this.name = newValue},list(newVal, oldVal) {this.list = newVal}}2. watch监听的多个属性之间相互有联系（useableCardTypeTime、tab

努力学习~冲鸭

6365人浏览 · 2021-08-23 16:30:29

努力学习~冲鸭 · 2021-08-23 16:30:29 发布

1. watch监听的多个属性之间没有联系（name、list），各自监听值改变后执行各自的方法，也无关顺序问题；

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

2. watch监听的多个属性之间相互有联系（useableCardTypeTime、tableData），并且任何一个值改变都有可能对第三个值（addDisable）产生改变，所以监听两个属性的方法中都需要写对第三个值的改变操作；

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

对于以上多个属性之间有关联的问题，还有一个更为简便的方式来解决，即：

使用 computed 和 watch 监听相结合的方式（推荐）：

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

对于项目中需要一次性监听多个属性值的变化时，推荐大家使用最后一种方式喔~~~（computed 和 watch 相结合）

欢迎大家一起讨论学习呐~~~