🎉 9-监视属性
This commit is contained in:
parent
45ffbb6cdd
commit
34bd3c0a8b
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="js/vue@2.7.16.js"></script>
|
||||
<title>监视属性</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<h2>天气很什么：{{isHot}}</h2>
|
||||
<button @click="changeWeather">切换天气</button>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
const vm = new Vue({
|
||||
el: "#app",
|
||||
data: {
|
||||
isHot: true
|
||||
},
|
||||
methods: {
|
||||
changeWeather() {
|
||||
this.isHot = !this.isHot
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
immediate: true,
|
||||
isHot: {
|
||||
handler(newVal, oldVal) {
|
||||
console.log("值修改", newVal, oldVal);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,166 @@
|
|||
# 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(); // 取消监视
|
||||
```
|
||||
Loading…
Reference in New Issue