Vue 中 Watcher 的作用是观察数据变化并执行相应操作，具体场景包括：侦听数据变化、触发 UI 更新、异步数据操作、实现自定义逻辑。
Vue 中 Watcher 的作用
在 Vue 中，Watcher 是一个用来观察数据变化并执行相应操作的对象。当被观察的数据发生变化时，Watcher 会触发相应的回调函数。
Watcher 的作用
Watcher 主要用于以下场景：
立即学习“前端免费学习笔记（深入）”；
- 侦听数据变化：当数据发生变化时，Watcher 会自动触发，执行回调函数中的操作。
- 触发 UI 更新：当数据变化后需要更新 UI 时，可以通过 Watcher 来触发 Vue 的响应式更新机制。
- 异步数据操作：当需要对异步获取的数据进行操作时，可以使用 Watcher 来等待数据返回并触发回调函数。
- 实现自定义逻辑：通过定义自定义 Watcher，可以实现更复杂的业务逻辑，例如条件判断、数据验证等。
Watcher 的使用
在 Vue 中，可以使用 watch 选项来定义 Watcher，格式如下：
watch: {
// 被观察的数据
propertyName: {
// 数据发生变化时触发的回调函数
handler(newValue, oldValue) {
// 要执行的操作
},
// 是否立即执行回调函数（默认 false）
immediate: true,
},
}示例
以下是一个简单示例，演示如何使用 Watcher 来更新 UI：
const App = {
data() {
return {
count: 0,
};
},
watch: {
count(newValue, oldValue) {
console.log(`计数从 ${oldValue} 变为 ${newValue}`);
},
},
template: `计数：{{ count }}
`,
};在这个示例中，当 count 数据发生变化时，Watcher 会触发回调函数，并打印出数据变化的信息。
