Vue 中 Watcher 的作用

在 Vue 中，Watcher 是一个用来观察数据变化并执行相应操作的对象。当被观察的数据发生变化时，Watcher 会触发相应的回调函数。

Watcher 的作用

Watcher 主要用于以下场景：

侦听数据变化：当数据发生变化时，Watcher 会自动触发，执行回调函数中的操作。

触发 UI 更新：当数据变化后需要更新 UI 时，可以通过 Watcher 来触发 Vue 的响应式更新机制。

异步数据操作：当需要对异步获取的数据进行操作时，可以使用 Watcher 来等待数据返回并触发回调函数。

实现自定义逻辑：通过定义自定义 Watcher，可以实现更复杂的业务逻辑，例如条件判断、数据验证等。

Watcher 的使用

在 Vue 中，可以使用 选项来定义 Watcher，格式如下：

<code class="js">watch: {
  // 被观察的数据
  propertyName: {
    // 数据发生变化时触发的回调函数
    handler(newValue, oldValue) {
      // 要执行的操作
    },
    // 是否立即执行回调函数（默认 false）
    immediate: true,
  },
}</code>

示例

以下是一个简单示例，演示如何使用 Watcher 来更新 UI：

<code class="js">const App = {
  data() {
    return {
      count: 0,
    };
  },
  watch: {
    count(newValue, oldValue) {
      console.log(`计数从 ${oldValue} 变为 ${newValue}`);
    },
  },
  template: `<p>计数：{{ count }}</p>`,
};</code>

在这个示例中，当 数据发生变化时，Watcher 会触发回调函数，并打印出数据变化的信息。