Vue2.0 - 11. Watch监视属性

vue2.0 基础学习目录

1.当监视的属性发生变化时,回调函数 handler 会自动调用进行相关操作
2. 监视的属性必须存在,才可以监视
3. 监视属性两种写法
在new vue时配置watch
在new vue创建完成后,通过 vm.$watch(‘监视的属性’,{ //监视的配置内容 })
4. 监视多级结构中某个属性的变化 对象.属性 监视
5. watch 默认不检测对象内部值的改变,可以通过 deep:true 进行深度监视
6. 监视属性不光可以监视data中的属性、对象也可以监视计算属性
7. 监视属性可以简写,但代价是不能再配置 immediate、deep

1
2
3
4
5
6
7
8
watch:{
personState(newValue,oldValue){
//回调处理函数
}
}
vm.$watch('personState',function(newValue,oldValue){
//回调处理函数
})
  1. computed 计算属性能完成的watch都可以完成。watch可以完成的computed不一定能完成。例如:watch可以进行异步操作
  2. 所有被vue管理的函数最好写成普通函数,这样this指向才vm或者组件对象实例
  3. 所有不被vue管理的函数(定时器,ajax回调等)最好写成箭头函数,这样this指向才vm或者组件对象实例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>11.监视属性</title>
<script src="../js/vue.js"></script>
<style></style>
</head>
<body>
<div id="root">
<h2>vue 监视属性</h2>
<span>人生真的是{{personState}}</span>
<br /><br />
<button @click="btnClick">修改人生的状态</button>
<hr />
<h3>对象内容x {{obj.x}}</span><br>
<button @click="btnXClick">btn add</button>
<hr />
<h3>对象内容y {{obj.y}}</span><br>
<button @click="btnYClick">btn add</button>
</div>
</body>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root', // 直接指定vue对应的容器
data() {
return {
state: true,
obj: { x: 10, y: 20 }
};
},
methods: {
btnClick() {
this.state = !this.state;
},
btnXClick(){
this.obj.x ++;
},
btnYClick(){
this.obj.y++;
},
},
computed: {
personState() {
return this.state ? '大起' : '大落';
}
},

/*
1. 当监视的属性发生变化时,回调函数 handler 会自动调用进行相关操作
2. 监视的属性必须存在,才可以监视
3. 监视属性两种写法
1. 在new vue时配置watch
2. 在new vue创建完成后,通过 vm.$watch('监视的属性',{ //监视的配置内容 })
4. 监视多级结构中某个属性的变化 对象.属性 监视
5. watch 默认不检测对象内部值的改变,可以通过 deep:true 进行深度监视
6. 监视属性不光可以监视data中的属性、对象也可以监视计算属性
7. 监视属性可以简写,但代价是不能再配置 immediate、deep
watch:{
personState(newValue,oldValue){
//回调处理函数
}
}
vm.$watch('personState',function(newValue,oldValue){
//回调处理函数
})
8. computed 计算属性能完成的watch都可以完成。watch可以完成的computed不一定能完成。例如:watch可以进行异步操作

备注:
所有被vue管理的函数最好写成普通函数,这样this指向才vm或者组件对象实例
所有不被vue管理的函数(定时器,ajax回调等)最好写成箭头函数,这样this指向才vm或者组件对象实例
*/
watch: {
personState:{
handler(newValue, oldValue){
console.log(
`watch: 计算属性 personState 被修改了,原始值是:${oldValue} 新值为:${newValue}`
);
}
},
state: {
immediate: true, //初始化时让 handler 调用一次
handler(newValue, oldValue) {
console.log(
`watch: state 被修改了,原始值是:${oldValue} 新值为:${newValue}`
);
}
},
// 监视多级结构中某个属性的变化
'obj.x':{
immediate: true, //初始化时让 handler 调用一次
handler(newValue, oldValue) {
console.log(
`watch: obj.x 被修改了,原始值是:${oldValue} 新值为:${newValue}`
);
}
},
// watch 默认不检测对象内部值的改变,可以通过 deep:true 进行深度监视
'obj':{
deep:true, //进行深度监视
// immediate: true, //初始化时让 handler 调用一次
handler(newValue, oldValue) {
console.log(`watch: obj 被修改了 obj.x:${newValue.x} obj.x:${newValue.y}`);
}
},
//监视属性的简写

personState(newValue, oldValue){
console.log(
`watch: 计算属性 personState 被修改了,原始值是:${oldValue} 新值为:${newValue}`
);
}
}
});
//监视属性的第二种写法 首先保证vm创建完毕
// vm.$watch('state', {
// immediate: true, //初始化时让 handler 调用一次
// handler(newValue, oldValue) {
// console.log(
// `state 被修改了,原始值是:${oldValue} 新值为:${newValue}`
// );
// }
// });
</script>
</html>

vue2.0 进阶学习的目录

完整代码可以在 GitHub