2019-07-17 杂记

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，否则监听不到变化。