167 lines
4.0 KiB
Markdown
167 lines
4.0 KiB
Markdown
|
# Vue2 监视属性（Watch）详解文档
|
|||
|
|
|
|||
|
|
## 一、基本概念
|
|||
|
|
|
|||
|
|
监视属性（Watch）是 Vue2 中用于观察和响应数据变化的机制。它允许你在数据变化时执行异步操作或更复杂的逻辑。
|
|||
|
|
|
|||
|
|
## 二、代码示例解析
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<div id="app">
|
|||
|
|
<h2>天气很什么：{{isHot ? '炎热' : '凉爽'}}</h2>
|
|||
|
|
<button @click="changeWeather">切换天气</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
const vm = new Vue({
|
|||
|
|
el: "#app",
|
|||
|
|
data: {
|
|||
|
|
isHot: true
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
changeWeather() {
|
|||
|
|
this.isHot = !this.isHot;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
isHot: {
|
|||
|
|
immediate: true, // 立即执行handler
|
|||
|
|
handler(newVal, oldVal) {
|
|||
|
|
console.log("天气状态修改", newVal, oldVal);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 三、核心特性
|
|||
|
|
|
|||
|
|
### 1. 基本语法结构
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
watch: {
|
|||
|
|
要监视的属性: {
|
|||
|
|
handler(newValue, oldValue) {
|
|||
|
|
// 响应变化
|
|||
|
|
},
|
|||
|
|
immediate: false, // 是否立即执行
|
|||
|
|
deep: false // 是否深度监视
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 简写形式（不需要配置项时）
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
watch: {
|
|||
|
|
isHot(newVal, oldVal) {
|
|||
|
|
console.log("天气变化", newVal, oldVal);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3. 深度监视（deep watch）
|
|||
|
|
|
|||
|
|
通常监视对象属性。
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
watch: {
|
|||
|
|
someObject: {
|
|||
|
|
handler(newVal) {
|
|||
|
|
console.log("对象内部变化", newVal);
|
|||
|
|
},
|
|||
|
|
deep: true // 深度监视对象内部值变化
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 四、配置选项说明
|
|||
|
|
|
|||
|
|
| 选项 | 类型 | 默认值 | 说明 |
|
|||
|
|
| --------- | -------- | ------ | ---------------------------- |
|
|||
|
|
| handler | Function | 必填 | 数据变化时的回调函数 |
|
|||
|
|
| immediate | Boolean | false | 是否立即以当前值执行handler |
|
|||
|
|
| deep | Boolean | false | 是否深度观察对象内部值的变化 |
|
|||
|
|
|
|||
|
|
## 五、最佳实践
|
|||
|
|
|
|||
|
|
1. **命名规范**：
|
|||
|
|
- 监视属性通常以 `watch` 开头命名方法（如 `watchIsHotChange`）
|
|||
|
|
- 或者直接使用被监视的属性名
|
|||
|
|
|
|||
|
|
2. **使用场景**：
|
|||
|
|
- 数据变化需要执行异步操作时
|
|||
|
|
- 数据变化需要执行开销较大的操作时
|
|||
|
|
- 需要观察嵌套数据结构变化时
|
|||
|
|
|
|||
|
|
3. **性能考虑**：
|
|||
|
|
- 避免在handler中执行复杂同步操作
|
|||
|
|
- 对于大对象，谨慎使用deep watch
|
|||
|
|
|
|||
|
|
## 六、高级用法
|
|||
|
|
|
|||
|
|
### 1. 监视计算属性
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
computed: {
|
|||
|
|
weatherDesc() {
|
|||
|
|
return this.isHot ? "炎热" : "凉爽";
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
weatherDesc(newVal) {
|
|||
|
|
console.log("天气描述变化:", newVal);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 监视路由变化
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
watch: {
|
|||
|
|
'$route'(to, from) {
|
|||
|
|
console.log("路由变化", to.path, from.path);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3. 多属性监视
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
watch: {
|
|||
|
|
// 监视多个属性
|
|||
|
|
'a.b.c': function(newVal) {
|
|||
|
|
// 当a.b.c变化时执行
|
|||
|
|
},
|
|||
|
|
'x.y': 'someMethod' // 直接调用methods中的方法
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 七、与计算属性的比较
|
|||
|
|
|
|||
|
|
| 特性 | 计算属性 | 监视属性 |
|
|||
|
|
| ------ | ------------ | ------------ |
|
|||
|
|
| 目的 | 派生新数据 | 响应数据变化 |
|
|||
|
|
| 缓存 | 有缓存 | 无缓存 |
|
|||
|
|
| 异步 | 不支持 | 支持 |
|
|||
|
|
| 返回值 | 必须返回 | 不需要返回 |
|
|||
|
|
| 复杂度 | 适合简单计算 | 适合复杂逻辑 |
|
|||
|
|
|
|||
|
|
## 八、常见问题
|
|||
|
|
|
|||
|
|
1. **为什么handler没有被调用？**
|
|||
|
|
- 检查监视的属性名拼写是否正确
|
|||
|
|
- 确认属性值确实发生了变化（对于对象/数组，可能需要深度监视）
|
|||
|
|
|
|||
|
|
2. **什么时候使用deep watch？**
|
|||
|
|
- 当需要检测对象内部属性变化时
|
|||
|
|
- 注意性能影响，必要时可以指定具体路径如 `'obj.prop'`
|
|||
|
|
|
|||
|
|
3. **如何取消监视？**
|
|||
|
|
- 使用 `vm.$watch()` 返回的取消函数：
|
|||
|
|
```javascript
|
|||
|
|
const unwatch = this.$watch('someProp', handler);
|
|||
|
|
unwatch(); // 取消监视
|
|||
|
|
```
|