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/