如何获取 Vue 中的观察者：使用 watch() 函数，传入要观察的数据及其处理函数。嵌套观察对象属性时，使用点符号。立即执行处理函数，将 immediate 选项设置为 true。监听多个数据，使用数组作为表达式或对象。
Vue 如何获取观察者
在 Vue.js 中，观察者是一种追踪其依赖关系的特殊类型响应式对象。当依赖关系发生更改时，观察者会自动重新评估并触发更新。
如何获取观察者
获取观察者的方法是使用 watch() 选项。watch() 函数接受两个参数：
立即学习“前端免费学习笔记（深入）”；
- 表达式或对象：要观察的数据或计算属性。
- 处理函数：当观察的数据或计算属性更改时要调用的函数。
示例
const watchExample = {
data() {
return {
count: 0
}
},
watch: {
// 观察 count 数据并调用处理函数
count(newValue, oldValue) {
console.log(`count changed from ${oldValue} to ${newValue}`)
}
}
}在上面的示例中，watch() 函数观察 count 数据，并定义了一个处理函数，该函数在 count 更改时被调用。
嵌套观察
您还可以使用点符号嵌套观察对象属性。例如：
const nestedWatchExample = {
data() {
return {
user: {
name: 'John'
}
}
},
watch: {
'user.name'(newValue, oldValue) {
console.log(`user.name changed from ${oldValue} to ${newValue}`)
}
}
}立即执行处理函数
默认情况下，处理函数会在下一次 DOM 更新周期之前执行。要立即执行处理函数，请将 immediate 选项设置为 true。
const immediateExample = {
data() {
return {
count: 0
}
},
watch: {
count: {
handler(newValue, oldValue) {
console.log(`count changed from ${oldValue} to ${newValue}`)
},
immediate: true // 立即执行处理函数
}
}
}监听多个数据
要监听多个数据，您可以使用数组作为表达式或对象。
const multipleWatchExample = {
data() {
return {
count: 0,
name: 'John'
}
},
watch: {
['count', 'name'](newValue, oldValue) {
console.log(`count or name changed`)
}
}
} 
