Vue.js 监听属性
Vue.js 是一款流行的前端框架，其通过响应式数据绑定使得数据与视图可以非常方便地实时同步，从而提高了开发效率。在 Vue.js 中，我们可以轻松地监听属性的变化，并做出相应的响应。下面就详细介绍一下在 Vue.js 中监听属性的相关知识点。
基本概念
在 Vue.js 中，我们使用 watch 来监听属性的变化。watch 是一个对象，其中包含了要监听的属性名和对应的回调函数。当我们监听的属性的值发生变化时，就会触发对应的回调函数。比如我们可以在 created 生命周期里面定义 watch 对象，如下：
created () {
this.$watch('username', (newValue, oldValue) => {
console.log(`username changed: ${oldValue} --> ${newValue}`)
})
}
在上面的代码中，我们监听了当前 Vue 实例的 username 属性，并在其值发生变化时打印出新旧值。
除了直接使用 $watch 方法，我们还可以通过在对象中定义 watch 属性来监听属性的变化，如下：
export default {
data () {
return {
username: ''
}
},
watch: {
username (newValue, oldValue) {
console.log(`username changed: ${oldValue} --> ${newValue}`)
}
}
}
在上面的代码中，我们通过在组件对象中定义 watch 属性来实现监听属性的变化。这种方式和使用 $watch 方法是等价的。
深度监听
在 Vue.js 中，我们还可以通过设置 deep 选项来实现深度监听。当我们开启了 deep 选项后，Vue.js 会递归监听嵌套属性的变化，如下：
export default {
data () {
return {
user: {
username: '',
age: 0
}
}
},
watch: {
user: {
handler (newValue, oldValue) {
console.log(`user changed: ${JSON.stringify(oldValue)} --> ${JSON.stringify(newValue)}`)
},
deep: true
}
}
}
在上面的代码中，我们开启了 deep 选项，并监听了 user 对象的变化。当 user 对象或其嵌套属性的值发生变化时，就会触发对应的回调函数。
监听计算属性
在 Vue.js 中，我们还可以通过 watch 来监听计算属性的变化。计算属性是一种基于依赖的属性，其值是根据其他属性计算得到的。当其依赖的属性发生变化时，计算属性的值也会变化。
export default {
data () {
return {
firstName: '',
lastName: ''
}
},
computed: {
fullName () {
return this.firstName + ' ' + this.lastName
}
},
watch: {
fullName (newValue, oldValue) {
console.log(`fullName changed: ${oldValue} --> ${newValue}`)
}
}
}
在上面的代码中，我们定义了一个计算属性 fullName，它依赖于 firstName 和 lastName 属性。当这两个属性的值发生变化时，计算属性 fullName 的值也会发生变化。我们可以通过定义 watch 对象来监听 fullName 的变化，进一步做出相应的响应。
经过上述解析，我们可以看出，在Vue.js中通过watch监听属性变化是比较简单和实用的方法，能够提升开发体验和效率，建议开发者掌握相关技能。