监视属性

Vue , Comments

VUe的引入

一、 配置项

  1. immediate

配置初始化时让handler被调用

  1. handler(newValue,oldValue)

配置当对应的变量发生变化时调用的方法,可以接受两个参数

  1. deep

配置是否进行多级目录

二、书写的方式

  1. 直接在new Vue中配置

可以使用所有配置项

1
2
3
4
5
6
7
8
9
//监视多级结构中某个属性的变化
                'number.a': {
                    immediate:true,//初始化时让handler被调用,
                    deep:true,//检测多级
                    // handler 在监听属性发生改变时会被调用
                    handler(newValue,oldValue){
                        console.log("a改变了",newValue,oldValue);
                    }
                },
  1. 简写，直接写hadler函数

不能添加配置项

1
2
3
4
5
//简写
               ishot(newValue,oldValue){
                   console.log("a改变了",newValue,oldValue);
                   console.log();
               }
  1. 使用vm.$watch()配置

可以使用所有配置项

1
2
3
4
5
6
7
8
9
10
//一、使用配置项
         vm.$watch('ishot',{
             immediate:true,
               console.log("ishot被改变了",newValue,oldValue);
           }
         })
//二、不使用配置项
 vm.$watch('ishot',function(){
               console.log("ishot被改变了",newValue,oldValue);
           })

三、watch与computed的区别

  1. computed能完成的，watch都能完成。
  2. watch能完成的功能，computed不一定能完成。例如：watch可以进行异步操作

两个重要的小原则：
1.所被vue管理的函数，最好都写成普通函数，这样this的执行才是vm或 组件实例对象
2.所有不被vue所管理的函数(定时器setTimeout、Ajax的回调函数等、promise问题等)
最好写成箭头汗水，这样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

<body>
<!-- 
   
 -->
    <div id="root">
       姓 <input type="text" v-model="firstName"> <br>
       名 <input type="text" v-model="lastName"> <br>
    <span>全名 {{fullname}}</span>
    </div>
    <script>
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示
       const vm= new Vue({
            el: '#root',
            data: {
                firstName:'张',
                lastName:'三',
                fullname:'张三'//监视属性需要先创建一个变量便于后期修改
            },
            computed: {
                // fullname(){
                //     return this.firstName+'-' +this.lastName
                // }
            }
            ,
            methods: {
                changeishot(){
                    this.ishot=!this.ishot
                }
            },
            //监视属性
            watch: {
                firstName(){
                    //setTimeout直接由浏览器执行，其this指向为Windows，固需要使用箭头函数，this指向往上找
                    setTimeout(() => {
                    this.fullname=this.firstName+'-' +this.lastName
                    }, 1000);
                },
               lastName(){
                //setTimeout直接由浏览器执行，其this指向为Windows，固需要使用箭头函数，this指向往上找
                setTimeout(() => {
                    console.log(this)
                    this.fullname=this.firstName+'-' +this.lastName
                    }, 1000);
               }
            },
    
        })
        // // 第二种配置方法
        // vm.$watch('ishot',{
        //     immediate:true,
        //     handler(newValue,oldValue){
        //         console.log("ishot被改变了",newValue,oldValue);
        //     }
        // })
    </script>
</body>

jhfutureWeb Developer & Designer

一个记录技术分享的网站。