vue中watch如何同时监听多个属性
作者：努力学习~冲鸭
这篇文章主要介绍了vue中watch如何同时监听多个属性,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue watch同时监听多个属性
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 相结合）
vue watch深度监听多个属性实例
watch :{
//监听type的变化
'temp.type': {
handler(type,old) {
//这里写你的业务逻辑
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) {
//这里写你的业务逻辑
console.log('obj.a changed', liveName);
if (this.temp.type == 1) {
this.temp.title = " 速来↓↓↓"
}
},
immediate: true,
// deep: true
}
},watch中的immediate、handler和deep属性
（1）immediate和handler
这样使用watch时有一个特点，就是当值第一次绑定时，不会执行监听函数，只有值发生改变时才会执行。
如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。
（2）deep
当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，此时就需要deep属性对对象进行深度监听。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。