Vue2.0 - 11. Watch监视属性

前端►vue2 , , 评论

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

odinsam

odinsamHappy Coder

年迈但是尚能恰饭的快乐Coder。