VUE watch

111 阅读1分钟
div id="app">
    h1 @click="add">{{msg}}</h1>
    !-- <h1 @click="obj.a++">{{obj.a}}</h1>
    h1 @click="obj.b++">{{obj.b}}</h1> -->
    h1>{{obj}}</h1>
</div>
<script src="./vue2.6.14.js"></script>
<script>
    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') */
            }
        }
    })

   
</script>