Vue 中 watch 可以监听数据属性和计算属性的变化。数据属性包括响应式数据属性（如 count、message），计算属性则由 computed 属性返回（如 fullName）。默认情况下，watch 执行浅度比较，通过设置 deep 选项为 true 可进行深度比较。
Vue 中 watch 可以监听的值
Vue 中的 watch 选项允许开发者侦听组件数据或计算属性的变化，并相应执行回调函数。它可以监听以下类型的值：
数据属性
watch 可以监听组件实例中的任何响应式数据属性。这些属性通常使用 data() 函数定义。例如：
export default {
data() {
return {
count: 0,
message: 'Hello Vue!'
}
},
watch: {
count(newValue, oldValue) {
// 当 count 变化时执行此回调
},
message(newValue, oldValue) {
// 当 message 变化时执行此回调
}
}
}计算属性
watch 还能够监听由 computed 属性返回的计算值。例如：
export default {
computed: {
fullName() {
return this.firstName + ' ' + this.lastName
}
},
watch: {
fullName(newValue, oldValue) {
// 当 fullName 变化时执行此回调
}
}
}深度和浅度监听
默认情况下，watch 将执行浅度比较，这意味着它将检查对象引用的变化，而不是检查对象内部属性的变化。要执行深度比较，可以将 deep 选项设置为 true：
立即学习“前端免费学习笔记（深入）”；
export default {
watch: {
user: {
handler(newValue, oldValue) {
// 当 user 对象或其任何属性发生变化时执行此回调
},
deep: true
}
}
} 
