div id="app" <h1 @click="add">{{msg}}

<h1 @click="obj.a++">{{obj.a}}

<h1 @click="obj.b++">{{obj.b}}

{{obj}}

new Vue({
    el:"#app",
   data:function (){
        return {
            msg:'你好',
            obj:{
                a:0,
                b:0
            }
        }
    },
    /* 因为vue不是操作dom了，视图的变化是根据数据来的 */
    /* 对数据进行实时监控的方法 监听器 */
    watch:{
        /* handler是数据msg 发生变化的时候触发的方法 */
        msg:{
            immediate:true,
            handler:function(newVal,oldVal){
                console.log('新值:'+newVal);
                console.log('旧值:'+oldVal);
            }
        }
        /* 对象里面的key 最传统的方式其实就是要加引号 */
        // 'obj.a':{
        //     immediate:true,
        //     handler:function(newV,oldV){
        //         console.log('a',newV,oldV);
        //     }
        // },
        // 'obj.b':{
        //     immediate:true,
        //     handler:function(newV,oldV){
        //         console.log('b',newV,oldV);
        //     }
        // },
        // obj:{
        //     immediate:true,
        //     handler:function(newV,oldV){
            /* newV.a会报错使用 newV是一个变量 */
        //         console.log('obj',newV['a'],oldV['b']);
        //     },
        //     /* 深度监听对象里面的属性值 */
        //     /* 深度监听 对象里面的值每次发生变化都会触发handler方法 */
        //     /* 因为对象是引用数据类型，所以
        //     每次值发生变化，对应的内存地址并没有发生变化，所以newV
        //     和oldV都是同一个 */
        //     deep:true
        // }
    },
    methods:{
        add(){
            /* this.msg = 'hello' */
           /*  console.log(this.obj); */
           /*  this.obj.c = '123' */
          /*  this.$set(this.obj,'c','123') */
          /*   delete this.obj.a */
         /*  this.$delete(this.obj,'a') */
        }
    }
})