Vue watch监听

// watch能监听
var vue = new Vue({
    data:{
        a:1,
        b:[],
        c:{
            d:2,
            e:"3"
        },
        firstName: ''
    },
    methods:{
        clickMethod(){
            this.c.f=4      // 通过点方法给对象添加属性，这时候watch监听不到变化
            this.$set(this.c,"f",4)   // 通过$set方法添加属性，watch能监听到变化
        }
    },
    watch:{
        // 当a的值发生改变时触发
        a:function(val,oldVal){
            console.log('new:%s,old:%s',val,oldVal)
        }，
        // 数组长度发生变化时触发
        b:function(val,oldVal){
            console.log('new:%s,old:%s',val,oldVal)
        }，
        // 对象中的属性值发生变化时触发
        c:{
            handler: function (val, oldVal) {
                console.log('new:%s,old:%s',val,oldVal)
            },
            deep: true   // 深度监听，监听到更深层级值的变化
        },
        // 深度监听对性能影响较大，修改c里面任何一个属性都会触发这个监听器里的 handle。可以做如下处理：
        ‘c.d': {
            handler(newName, oldName) {
              console.log('obj.a changed');
            },
            immediate: true,
            // deep: true
        },
        // 上面的例子是值变化时候，watch才执行，我们想让值最初时候watch就执行就用到了handler和immediate属性
        firstName: {
            handler(newName, oldName) {
              this.fullName = newName + ' ' + this.lastName;
            },
            // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法，如果设置了false，那么效果和上边例子一样
            immediate: true
        }
    }
})