vue2 wacth监听多个

在 Vue.js 2 中，可以通过 watch 选项来监听多个属性的变化。你可以使用对象的方式来定义多个监听器，每个监听器都包含一个属性名和对应的回调函数。
以下是一个示例代码：
export default {
data() {
return {
firstName: '',
lastName: '',
fullName: ''
}
},
watch: {
firstName: function(newVal, oldVal) {
this.fullName = newVal + ' ' + this.lastName
},
lastName: function(newVal, oldVal) {
this.fullName = this.firstName + ' ' + newVal
}
}
}
登录后复制
在上面的代码中，我们定义了三个属性：firstName、lastName 和 fullName。当 firstName 或 lastName 发生变化时，对应的监听器会被触发，然后更新 fullName 属性的值。
如果你需要监听的属性比较多，你也可以使用 $watch 方法来实现，这个方法支持传递一个字符串或数组来监听多个属性。例如：
export default {
data() {
return {
firstName: '',
lastName: '',
fullName: ''
}
},
created() {
this.$watch(['firstName', 'lastName'], function(newValues, oldValues) {
this.fullName = newValues[0] + ' ' + newValues[1]
})
}
}
登录后复制
在上面的代码中，我们使用 $watch 方法来监听 firstName 和 lastName 两个属性的变化。当这两个属性任意一个发生变化时，对应的回调函数就会被触发。