vue2 监听属性变化

在 Vue2 中，你可以使用 watch 属性来监听属性变化。具体步骤如下：

在组件中定义要监听的属性。

data() {
return {
message: 'Hello World'
}
}
登录后复制

使用 watch 属性监听属性变化。

watch: {
message(newValue, oldValue) {
console.log(`message changed from ${oldValue} to ${newValue}`)
}
}
登录后复制
在上面的代码中，我们使用 watch 属性监听了 message 属性的变化。当 message 属性发生变化时，回调函数会被执行，同时传递新值和旧值作为参数。
你也可以监听一个对象中的属性变化，如下所示：
data() {
return {
person: {
name: '张三',
age: 18
}
}
},
watch: {
'person.name'(newValue, oldValue) {
console.log(`name changed from ${oldValue} to ${newValue}`)
},
'person.age'(newValue, oldValue) {
console.log(`age changed from ${oldValue} to ${newValue}`)
}
}
登录后复制
在上面的代码中，我们使用 watch 属性监听了 person 对象中的 name 和 age 属性的变化。当 person 对象的某个属性发生变化时，对应的回调函数会被执行，同时传递新值和旧值作为参数。注意，在监听对象属性变化时，需要使用字符串形式的表达式来指定要监听的属性。