2019-07-17 杂记

88 阅读1分钟

Vue Watch

watch内可以监听data的变化,watch的定义方式如下

{[key: string]: string | Function | Object  }

//data内数据为:

data() {
    showModal: true,
    a:{
        name: 'Jack',
        height: 180
    },
    b: 'hellow world',
    c: 123
},

//在watch中,键是要监听的数据:
watch: {
    b: 'doSomething',
    //或者 a.name必须要用字符串
    'a.name': {
        //doSomething
    },
    //
    a: {},

    //值可以是一个函数,但不能是箭头函数;第一个参数为监听的数据的变化后的值,第二个为变化之前的值;当只有一个参数时参数为数据变化后的值
    showmodal: function(newVal, oldVal) {
        //doSomething
    },
    //或者
    showModal(newVal) {
        if (newVal) {
          console.log('1')
        } else {
          console.log('0')
        }
    },
    

    //值可以是一个字符串,这个字符串是方法名
    b: 'doSomething',
    
    //值可以是一个对象,其中可以包含一些函数和其他选项,比如是否要深度遍历:
    'a.name': {
        handler(newVal, oldval) {
            console.log('2')
        },
        deep: true
    }
},
methods: {
    doSomething() {
        //
    }
}

总结:

1.watch的两个参数很重要。

2.定义函数的三个方法:

1.对象,对象内可包含函数以及例如deep: true的选项;

2.直接定义一个函数操作;

3.定义一个字符串,该字符串为一个方法名;

常用:

 data:{
     a:1,
     b:{
         c:1
     }
 },
 watch:{
     a(val, oldVal){//普通的watch监听
         console.log("a: "+val, oldVal);
     },
     b:{//深度监听,可监听到对象、数组的变化
         handler(val, oldVal){
             console.log("b.c: "+val.c, oldVal.c);//但是这两个值打印出来却都是一样的
         },
         deep:true
     }
 }

3.如果要观察data下一个对象的属性,要使用'obj.key'的方式,加引号。

4.如果要观察一个对象的变化,要使用deep: true,否则监听不到变化。