Vue 侦听器

封面图 • 2026-03-24 • Vue

在 Vue 中，**侦听器（Watcher）** 是一个非常重要的概念，它用于监听数据的变化，并在数据变化时执行相应的操作。Vue 提供了 `watch` 选项来实现对响应式数据的监听。

---

## ✅ 一、Vue 侦听器的作用

- 监听 **响应式数据** 的变化（如 `data`、`props`、`computed` 等）
- 在数据变化后执行异步或复杂操作（如搜索、网络请求等）
- 可以配合 `deep` 和 `immediate` 等选项进行更精细的控制

---

## ✅ 二、使用 `watch` 选项

### 1. 基本用法

```javascript
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  watch: {
    // 监听 message 的变化
    message(newVal, oldVal) {
      console.log('message changed from', oldVal, 'to', newVal);
    }
  }
};
```

### 2. 使用 `immediate` 选项

如果希望在监听器初始化时就立即执行一次：

```javascript
watch: {
  message: {
    handler(newVal, oldVal) {
      console.log('message changed:', newVal);
    },
    immediate: true // 初始化时立即执行一次
  }
}
```

### 3. 深度监听（`deep`）

如果监听的是对象或数组中的某个属性，需要设置 `deep: true`：

```javascript
data() {
  return {
    user: {
      name: 'John',
      age: 25
    }
  };
},
watch: {
  user: {
    handler(newVal, oldVal) {
      console.log('user changed:', newVal);
    },
    deep: true // 深度监听对象内部变化
  }
}
```

---

## ✅ 三、使用 `this.$watch()` 方法

除了在 `watch` 选项中定义监听器外，也可以在组件内部使用 `this.$watch()` 动态创建监听器：

```javascript
export default {
  data() {
    return {
      count: 0
    };
  },
  mounted() {
    this.$watch('count', (newVal, oldVal) => {
      console.log('count changed from', oldVal, 'to', newVal);
    });
  }
};
```

---

## ✅ 四、监听计算属性（Computed）

虽然 `computed` 是基于依赖自动更新的，但你也可以通过 `watch` 来监听 computed 属性的变化：

```javascript
computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
},
watch: {
  fullName(newVal, oldVal) {
    console.log('fullName changed:', newVal);
  }
}
```

---

## ✅ 五、监听 props

你也可以监听 `props` 的变化：

```javascript
props: {
  username: String
},
watch: {
  username(newVal, oldVal) {
    console.log('username changed:', newVal);
  }
}
```

---

## ✅ 六、总结

| 特性         | 描述 |
|--------------|------|
| `watch` 选项 | 在组件中声明监听器 |
| `immediate`   | 是否在初始化时立即执行 |
| `deep`        | 是否深度监听对象/数组 |
| `handler`     | 监听函数 |
| `this.$watch()` | 动态创建监听器 |

---

如果你有具体的场景（比如监听表单输入、搜索、API 请求等），我可以帮你写出更具体的示例代码 😊