vue中watch同时监听多个属性问题
1. watch监听的多个属性之间没有联系(name、list),各自监听值改变后执行各自的方法,也无关顺序问题;watch:{name(newValue, oldValue) {this.name = newValue},list(newVal, oldVal) {this.list = newVal}}2. watch监听的多个属性之间相互有联系(useableCardTypeTime、tab
·
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 相结合)
欢迎大家一起讨论学习呐~~~
更多推荐
已为社区贡献3条内容
所有评论(0)