vue---watch深度理解

   <div id="watch-example">
        <p>{{fullName}}</p>
        <input type="text"  v-model="firstName">
        <br/><br/><br/><br/><br/>
        <input type="text" v-model="obj.a">
        <br/>
        obj.a:<p>{{obj.a}}</p>
    </div>

    var app = new Vue({
            el:"#watch-example",
            data:{
                firstName:'Alisa',
                lastName:'Smith',
                fullName:"",
                obj:{
                    a:"123"
                }
            },
            watch:{
                // firstName(newValue,oldValue){
                //     console.log(newValue+"---"+oldValue);
                //     this.fullName = newValue+" "+this.lastName;
                // }

                // watch最开始绑定的时候是不会执行的，要等到监听的那个元素改变时才会执行,想要一开始就执行watch，就用handler方法，且handler方法里面的immediate要为true

                firstName:{
                    handler(newValue,oldValue){
                        console.log(newValue+"---"+ oldValue);
                        this.fullName = newValue+" "+this.lastName;
                    },
                    immediate:true
                },
                // obj(newData,oldData){
                //     console.log(newData+"---"+oldData);
                // }
                
                //vue不能检测到对象的增加或删除，如果我们需要监听obj的属性a的值，可以用deep，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会触发这个监听器里的 handler。
                obj: {
                    handler(newData, oldData) {
                        console.log(newData + "---" + oldData);
                    },
                    immediate: true,
                    deep: true
                },
                //优化：使用字符串形式监听。
                
                'obj.a':{
                    handler(newData, oldData) {
                        console.log(newData+"---"+oldData);
                    },
                    immediate: true,
                    //deep:true
                }
            }
        })    

　　原文地址：https://dunizb.com/2018/04/28/Vue-js-watch-Advanced-Usage/