第3章：vue生命周期及实例的属性

 

　　Vue的生命周期

　　vue的生命周期图示

 

 　　生命周期示例day02/03.html

?
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue生命周期</title>
    <script src="js/vue.js"></script>
    <script>
        window.onload=function(){
            let vm=new Vue({
                el:'#itany',
                data:{
                    msg:'welcome to itany'
                },
                methods:{
                    update(){
                        this.msg='欢迎来到南京网博！';
                    },
                    destroy(){
                        // this.$destroy();
                        vm.$destroy();
                    }
                },
                beforeCreate(){
                    alert('组件实例刚刚创建，还未进行数据观测和事件配置');
                },
                created(){  //常用！！！
                    alert('实例已经创建完成，并且已经进行数据观测和事件配置');
                },
                beforeMount(){
                    alert('模板编译之前，还没挂载');
                },
                mounted(){ //常用！！！
                    alert('模板编译之后，已经挂载，此时才会渲染页面，才能看到页面上数据的展示');
                },
                beforeUpdate(){
                    alert('组件更新之前');
                },
                updated(){
                    alert('组件更新之后');
                },
                beforeDestroy(){
                    alert('组件销毁之前');
                },
                destroyed(){
                    alert('组件销毁之后');
                }
            });
        }
    </script>
</head>
<body>
    <div id="itany">
        {{msg}}
        <br>
 
        <button @click="update">更新数据</button>
        <button @click="destroy">销毁组件</button>
    </div>
</body>
</html>

　　计算属性

　　1.基本用法

　　计算属性也是用来存储数据的，但具有以下几个特点　　

　　a.数据可以进行逻辑处理操作

　　b.对计算属性中的数据进行监视

　　计算属性取值不能向定义普通属性那样定义，需要定义函数，函数必须有返回值称为get值，调用的时候和普通属性是一样的{{}}

　　示例day02/04.html 

?
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
    <script src="js/vue.js"></script>
    <script>
        window.onload=function(){
            let vm=new Vue({
                el:'#itany',
                data:{  // 普通属性
                    msg:'welcome to itany'
                },
                computed:{ // 计算属性
                    msg2:function(){
                        return '欢迎来到南京网博';
                    }
                }
     
            });
        }
    </script>
</head>
<body>
    <div id="itany">
        <!-- 1,基本用法 -->
        <h2>{{msg}}</h2>
        <h2>{{msg2}}</h2>
    </div>
</body>
</html>

　　假如想要把msg以空格为分隔符然后反向输出，下面有两种方法

　　1，在数据展示时进行逻辑处理

　　2，使用计算属性定义函数在函数内处理

　　示例

?
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
    <script src="js/vue.js"></script>
    <script>
        window.onload=function(){
            let vm=new Vue({
                el:'#itany',
                data:{  // 普通属性
                    msg:'welcome to itany'
                },
                computed:{ // 计算属性
                    msg2:function(){
                        return '欢迎来到南京网博';
                    },
                    reverseMsg:function(){
                        return this.msg.split(' ').reverse().join(' ');
                    }
                }
     
            });
        }
    </script>
</head>
<body>
    <div id="itany">
        <!-- 1,基本用法 -->
        <h2>{{msg}}</h2>
        <h2>{{msg2}}</h2>
        <!-- 对数据进行处理 -->
        <!-- 缺点：在模板中放入了太多逻辑处理代码 -->
        <h2>{{msg.split(' ').reverse().join(' ')}}</h2>
        <!-- 在计算属性内定义函数处理 -->
        <h2>{{reverseMsg}}</h2>
</body>
</html>

　　页面显示，两种处理方法效果是一样的　　

 

 

 　　2.计算属性 vs 方法

　　将计算属性的get函数定义为一个方法也可以实现类似的功能

　　区别：

　　　　a.计算属性是基于它的依赖进行更新的，只有在相关依赖发送改变时才能更新变化

　　　　b.计算属性是缓存的，只要相关依赖没有改变，多次访问计算属性得到的值是之前缓存的计算结果，不会多次执行

　　示例day02/04html 计算属性

?
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
    <script src="js/vue.js"></script>
     
</head>
<body>
    <div id="itany">
        <!-- 1,基本用法 -->
        <h2>{{msg}}</h2>
        <h2>{{msg2}}</h2>
        <!-- 对数据进行处理 -->
        <!-- 缺点：在模板中放入了太多逻辑处理代码 -->
        <h2>{{msg.split(' ').reverse().join(' ')}}</h2>
        <!-- 在计算属性内定义函数处理 -->
        <h2>{{reverseMsg}}</h2>
        <button @click="change">修改值</button>
 
        <!--
            2.计算属性  vs 方法
        -->
        <!-- <h2>{{num1}}</h2>
        <h2>{{num2}}</h2>
        <h2>{{getNum2()}}</h2> -->
        <button onclick="fn()">测试</button>
    </div>
    <script>
            let vm=new Vue({
                el:'#itany',
                data:{  // 普通属性
                    msg:'welcome to itany',
                    num1:7
                },
                computed:{ // 计算属性
                    msg2:function(){
                        return '欢迎来到南京网博';
                    },
                    reverseMsg:function(){
                        // 可以包含逻辑处理操作，同时reverseMsg依赖于msg
 
                        return this.msg.split(' ').reverse().join(' ');
                    },
                    num2:function(){
                        console.log(new Date())
                        return this.num1-1
                    }
                },
                methods:{
                    change(){
                        // this.msg='i love you'
                        this.num1=666;
                    },
                    getNum2(){
                        console.log('num2'+new Date())
                        return this.num1-1;
                    }
                }
     
            });
         
        function fn(){
            setInterval(function(){              
                // console.log(vm.getNum2());
                console.log(vm.num2);
            },1000);
        }
    </script>
</body>
</html>

　　解析：函数fn是单独定义的不属于vue实例，点击测试时候调用，间隔1秒执行打印 vm.num2是打印计算属性

　　页面输出

 

 

 　　修改代码

　　调用方法输出而不是计算属性

?
1
2
console.log(vm.getNum2());
// console.log(vm.num2);

　　页面输出

 

 

 　　3,.get和set

　　计算属性由两部分组成：get和set，分别用来获取计算属性和设置计算属性

　　默认只有get，如果需要set，要自己添加

　　计算属性赋值不能给自己赋值而需要给该计算属性依赖的值赋值，示例

?
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
    <script src="js/vue.js"></script>
     
</head>
<body>
    <div id="itany">
        <!-- 1,基本用法 -->
        <h2>{{msg}}</h2>
        <h2>{{msg2}}</h2>
        <!-- 对数据进行处理 -->
        <!-- 缺点：在模板中放入了太多逻辑处理代码 -->
        <h2>{{msg.split(' ').reverse().join(' ')}}</h2>
        <!-- 在计算属性内定义函数处理 -->
        <h2>{{reverseMsg}}</h2>
        <button @click="change">修改值</button>
 
        <!--
            2.计算属性  vs 方法
        -->
        <!-- <h2>{{num1}}</h2>
        <h2>{{num2}}</h2>
        <h2>{{getNum2()}}</h2> -->
        <button onclick="fn()">测试</button>
        <!--
            3,get和set
        -->
        <h2>{{num2}}</h2>
        <button @click="change2">修改计算属性</button>
    </div>
    <script>
            let vm=new Vue({
                el:'#itany',
                data:{  // 普通属性
                    msg:'welcome to itany',
                    num1:7
                },
                computed:{ // 计算属性
                    msg2:function(){
                        return '欢迎来到南京网博';
                    },
                    reverseMsg:function(){
                        // 可以包含逻辑处理操作，同时reverseMsg依赖于msg
 
                        return this.msg.split(' ').reverse().join(' ');
                    },
                    num2:{
                        get:function(){
                            console.log(new Date())
                            return this.num1-1
                        },
                        set:function(val){
                            // console.log('修改num2的值')
                            // this.num2=val;
                            this.num1=val;
                        }
                         
                    }
                },
                methods:{
                    change(){
                        // this.msg='i love you'
                        this.num1=666;
                    },
                    getNum2(){
                        console.log('num2'+new Date())
                        return this.num1-1;
                    },
                    change2(){
                        this.num2=111;
                    },
                }
     
            });
         
        function fn(){
            setInterval(function(){              
                console.log(vm.getNum2());
                // console.log(vm.num2);
            },1000);
        }
    </script>
</body>
</html>

　　解析：点击修改计算属性调用change2方法，在这个方法内给num2赋值给111，当出现赋值操作则调用该计算属性的set方法，传递的参数val就是change2中设置的的值111，但是不能在set方法内直接修改num2 的值，如果直接修改会因为重复调用溢出栈报错，需要修改的是是num1的值，因为num2依赖num1所以num2的值也修改了

　　页面显示

 

 

 

 

 

 　　四，vue实例的属性和方法

　　1.属性

?
1
2
3
4
vm.$el
vm.$data
vm.$options
vm.$refs

　　示例05.html

?
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue实例的属性和方法</title>
    <script src="js/vue.js"></script>
     
</head>
<body>
    <div id="itany">
       {{msg}}
       <h2 ref="hello">你好</h2>
       <p ref='world'>世界</p>
       <hr>
       <!-- <p ref='title'>标题：{{name}}</p> -->
    </div>
    <script>
        vm=new Vue({
            el:'#itany',
            data:{ 
                msg:'welcome to itany',
            },
            name:'liuym',
            age:24,
            show:function(){
                console.log('show')
            },
        });
        // 属性
        // vm.属性名，获取data中的属性
        console.log(vm.msg);
        // vm.$el 获取vue实例关联的元素
        console.log(vm.$el)
        vm.$el.style.color='red'
 
        // vm.$data 获取数据对象
        console.log(vm.$data)
 
        // vm.$options 用来获取自定义属性
        console.log(vm.$options.name)
        vm.$options.show();
 
        // vm.$refs 获取所有添加ref属性的元素
        console.log(vm.$refs.hello);  // DOM对象
        vm.$refs.hello.style.color='red';
 
        // 方法
        // 手动挂载vue实例
        // vm.$mount('#itany')
        // var vm=new Vue({
        //     data:{
        //         msg:'欢迎来到南京网博',
        //         name:'tom'
        //     }
        // }).$mount('#itany');
 
        // vm.$destory() 销毁实例 一般不手动调用
        // vm.$destory();
 
        // vm.$nextTick(callback)在DOM更新完成后再执行回调函数，一般在修改数据之后使用该方法，以便能获取更新后的DOM
        // 修改数据
        // vm.name='汤姆';
        // DOM还没有更新完 Vue实现响应式并不是数据发生改变之后DOM立即变化，需要按一定的策略进行DOM更新，需要时间
        // console.log(vm.$refs.title.textContent);
        // vm.$nextTick(function(){
        //     // DOM更新完成再执行此代码
        //     console.log(vm.$refs.title.textContent);
        // });
    </script>
</body>
</html>

　　页面显示

 

 

 

　　2.方法

?
1
2
3
4
5
6
7
vm.$mount()
vm.$destroy()
vm.$nextTick()
 
vm.$set()
vm.$delete()
vm.$watch()

　　mount手动挂载实例

?
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue实例的属性和方法</title>
    <script src="js/vue.js"></script>
     
</head>
<body>
    <div id="itany">
       {{msg}}
       <h2 ref="hello">你好</h2>
       <p ref='world'>世界</p>
       <hr>
       <!-- <p ref='title'>标题：{{name}}</p> -->
    </div>
    <script>
        // vm=new Vue({
        //  el:'#itany',
        //  data:{ 
        //      msg:'welcome to itany',
        //  },
        //     name:'liuym',
        //     age:24,
        //     show:function(){
        //         console.log('show')
        //     },
        // });
        // 属性
        // vm.属性名，获取data中的属性
        // console.log(vm.msg);
        // vm.$el 获取vue实例关联的元素
        // console.log(vm.$el)
        // vm.$el.style.color='red'
 
        // vm.$data 获取数据对象
        // console.log(vm.$data)
 
        // vm.$options 用来获取自定义属性
        // console.log(vm.$options.name)
        // vm.$options.show();
 
        // vm.$refs 获取所有添加ref属性的元素
        // console.log(vm.$refs.hello);  // DOM对象
        // vm.$refs.hello.style.color='red';
 
        // 方法
        // 手动挂载vue实例
        // vm.$mount('#itany')
        var vm=new Vue({
            data:{
                msg:'欢迎来到南京网博',
                name:'tom'
            }
        }).$mount('#itany');
 
        // vm.$destory() 销毁实例 一般不手动调用
        // vm.$destory();
 
        // vm.$nextTick(callback)在DOM更新完成后再执行回调函数，一般在修改数据之后使用该方法，以便能获取更新后的DOM
        // 修改数据
        // vm.name='汤姆';
        // DOM还没有更新完 Vue实现响应式并不是数据发生改变之后DOM立即变化，需要按一定的策略进行DOM更新，需要时间
        // console.log(vm.$refs.title.textContent);
        // vm.$nextTick(function(){
        //     // DOM更新完成再执行此代码
        //     console.log(vm.$refs.title.textContent);
        // });
    </script>
</body>
</html>

　　手动挂载的效果和以下代码效果是一样的

?
1
2
3
4
5
6
7
8
9
10
11
vm=new Vue({
            el:'#itany',
            data:{ 
                msg:'welcome to itany',
            },
            name:'liuym',
            age:24,
            show:function(){
                console.log('show')
            },
        });

　　vm.$nextTick(callback)示例

　　vm.$nextTick(callback)在DOM更新完成后再执行回调函数，一般在修改数据之后使用该方法，以便能获取更新后的DOM

　　不使用nextTick在修改以后

?
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue实例的属性和方法</title>
    <script src="js/vue.js"></script>
     
</head>
<body>
    <div id="itany">
       {{msg}}
       <h2 ref="hello">你好</h2>
       <p ref='world'>世界</p>
       <hr>
       <p ref='title'>标题：{{name}}</p>
    </div>
    <script>
        // vm=new Vue({
        //  el:'#itany',
        //  data:{ 
        //      msg:'welcome to itany',
        //  },
        //     name:'liuym',
        //     age:24,
        //     show:function(){
        //         console.log('show')
        //     },
        // });
        // 属性
        // vm.属性名，获取data中的属性
        // console.log(vm.msg);
        // vm.$el 获取vue实例关联的元素
        // console.log(vm.$el)
        // vm.$el.style.color='red'
 
        // vm.$data 获取数据对象
        // console.log(vm.$data)
 
        // vm.$options 用来获取自定义属性
        // console.log(vm.$options.name)
        // vm.$options.show();
 
        // vm.$refs 获取所有添加ref属性的元素
        // console.log(vm.$refs.hello);  // DOM对象
        // vm.$refs.hello.style.color='red';
 
        // 方法
        // 手动挂载vue实例
        // vm.$mount('#itany')
        var vm=new Vue({
            data:{
                msg:'欢迎来到南京网博',
                name:'tom'
            }
        }).$mount('#itany');
 
        // vm.$destory() 销毁实例 一般不手动调用
        // vm.$destory();
 
        // vm.$nextTick(callback)在DOM更新完成后再执行回调函数，一般在修改数据之后使用该方法，以便能获取更新后的DOM
        // 修改数据
        vm.name='汤姆';
        // DOM还没有更新完 Vue实现响应式并不是数据发生改变之后DOM立即变化，需要按一定的策略进行DOM更新，需要时间
        console.log(vm.$refs.title.textContent);
        // vm.$nextTick(function(){
        //     // DOM更新完成再执行此代码
        //     console.log(vm.$refs.title.textContent);
        // });
    </script>
</body>
</html>

　　页面显示

 

 

 　　修改代码使用nextTick绑定在函数内执行

?
1
2
3
4
5
// console.log(vm.$refs.title.textContent);
        vm.$nextTick(function(){
            // DOM更新完成再执行此代码
            console.log(vm.$refs.title.textContent);
        });

　　页面显示

 

 

 　　方法

?
1
2
3
vm.$set(object,key,value)
vm.$delete(object,key)
vm.$watch(data,callback[,options])

　　set方法示例 day02/06.html

?
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加和删除属性</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="itany">
        <button @click="doUpdate">修改属性</button>
        <button @click="doAdd">添加属性</button>
        <hr>
       <h2>{{user.name}}</h2>
       <h2>{{user.age}}</h2>
    </div>
    <script>
        var vm=new Vue({
            el:'#itany',
            data:{ 
                user:{
                    id:1001,
                    name:'tom'
                    }
                },
                methods:{
                    doUpdate(){
                        this.user.name='汤姆';
                    },
                    doAdd(){
                        this.user.age=25; // 通过普通方式为对象添加属性时vue无法实时监控到
                        // this.$set(this.user,'age',18); // 通过vue实例的$set方法可以实时监视
                        // Vue.set(this.user,'age',19)
                          
                        // if(this.user.age){
                        //     this.user.age++;
                        // }else{
                        //     Vue.set(this.user,'age',1);
                        // }
                    },
                }
        });
        
    </script>
</body>
</html>

　　user本身没有age属性，使用doAdd方法添加这个属性，页面显示

 

 

 

 

 

 　　如果需要监控实时显示，修改代码使用set方法，修改方法doAdd()代码

?
1
this.$set(this.user,'age',18);

　　页面显示

 

 

 　　以下代码是添加属性的全局方式，和上面代码实现的效果是一样的

?
1
Vue.set(this.user,'age',19)

　　一般情况下set方法不直接使用而是做一个判断再使用，例如需要从user中获取这个属性，如果有这个属性则给这个属性值+1，赋值设置这个属性值为1

?
1
2
3
4
5
if(this.user.age){
    this.user.age++;
}else{
    Vue.set(this.user,'age',1);
 }

　　delete方法演示

　　06.html

?
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加和删除属性</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="itany">
        <button @click="doUpdate">修改属性</button>
        <button @click="doAdd">添加属性</button>
        <button @click="doDelete">删除属性</button>
        <hr>
       <h2>{{user.name}}</h2>
       <h2>{{user.age}}</h2>
    </div>
    <script>
        var vm=new Vue({
            el:'#itany',
            data:{ 
                user:{
                    id:1001,
                    name:'tom'
                    }
                },
                methods:{
                    doUpdate(){
                        this.user.name='汤姆';
                    },
                    doAdd(){
                        // this.user.age=25; // 通过普通方式为对象添加属性时vue无法实时监控到
                        this.$set(this.user,'age',18); // 通过vue实例的$set方法可以实时监视
                        // Vue.set(this.user,'age',19)
                          
                        // if(this.user.age){
                        //     this.user.age++;
                        // }else{
                        //     Vue.set(this.user,'age',1);
                        // }
                    },
                    doDelete(){
                        if(this.user.age){
                            // delete this.user.age; // 无效
                            Vue.delete(this.user,'age');
                        }
                    },
                }
        });
        
    </script>
</body>
</html>

　　页面显示

 

 

 　　watch方法示例

　　有两种方法监视数据day02/07.html

?
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监视数据的变化</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="itany">
      <input type='text' v-model="name">
      <h3> {{name}}</h3>
      <hr>
      <input type='text' v-model="age">
      <h3> {{age}}</h3>
    </div>
    <script>
        var vm=new Vue({
            el:'#itany',
            data:{ 
                name:'tom',
                age:23
            },
            watch:{ // 方式2，使用vue实例提供的watch选项
                age:(newValue,oldValue)=>{
                    console.log('age被修改了,原值'+oldValue+',新值'+newValue);
                }
            }
           });
           // 监视数据变化，没有全局方法
           // 方式1：使用vue实例提供的$watch()方法
           vm.$watch('name',function(newValue,oldValue){
               console.log('name被修改了,原值'+oldValue+',新值'+newValue);
 
           });     
    </script>
</body>
</html>

　　监视数据传递两个参数一个是修改后的新值一个是旧值

　　页面显示

 

 

 　　选项：deep 深度监视

　　为了发现对象内部值的变化，可以在选项参数中指定 deep: true。注意监听数组的变更不需要这么做。

　　示例,监听一个数组的变更

?
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监视数据的变化</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="itany">
      <input type='text' v-model="name">
      <h3> {{name}}</h3>
      <hr>
      <input type='text' v-model="age">
      <h3> {{age}}</h3>
      <hr>
      <input type='text' v-model="user.name">
      <h3> {{user.name}}</h3>
    </div>
    <script>
        var vm=new Vue({
            el:'#itany',
            data:{ 
                name:'tom',
                age:23,
                user:{
                    name:'汤姆'
                }
            },
            watch:{ // 方式2，使用vue实例提供的watch选项
                age:(newValue,oldValue)=>{
                    console.log('age被修改了,原值'+oldValue+',新值'+newValue);
                },
                user:(newValue,oldValue)=>{
                    console.log('user被修改了,原值'+oldValue+',新值'+newValue);
                },
            }
           });
           // 监视数据变化，没有全局方法
           // 方式1：使用vue实例提供的$watch()方法
           vm.$watch('name',function(newValue,oldValue){
               console.log('name被修改了,原值'+oldValue+',新值'+newValue);
 
           });     
    </script>
</body>
</html>

　　解析：想要监控数组user的变更，但是页面显示，因为只是修改了数组user下面属性name的值，但是数组user对name属性的指向并没有变化，需要深度监视需要加deep选项

 

 

 　　修改代码如下

?
1
2
3
4
5
6
7
  // 深度监视
user:{
    handler:(newValue,oldValue) => {
    console.log('user被修改啦，原值：'+oldValue.name+'，新值：'+newValue.name);
    },
    deep:true //深度监视，当对象中的属性发生变化时也会监视
    }

　　页面显示

 

 

 　　newValue和oldValue指向的是同一个地址空间，值是修改之后的值，所以是一样的。

posted @   minseo  阅读(72)  评论(0)  编辑  收藏  举报
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
点击右上角即可分享
微信分享提示
AI IDE Trae