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 相结合

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

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐