Vue 中如何利用watch 監聽對象中每一個屬性的變化

眾所周知，在vue中可以利用watch來監聽數據的變化，從而可以處理一些業務上需要處理的邏輯。一般我們都會監聽一些簡單數據類型：

比如：

var data = {
     name: 'testname',
     age: 18,
     newName: ''            
}

watch: {
     name(val) {
          this.newName = val
    }

}

　　上述例子就是監聽了一個簡單的數據，這種用法也是相對比較多一點的。那對於一些復雜的數據類型呢？比如對象？那要怎么監聽呢？這當然也是可以的。

　　首先我們要去熟悉一些watch 的文檔介紹：

　　

       第三個可選的參數，deep，當設置deep：true時，就可以深度監聽到對象到內部值的變化。（注：注意監聽數組的變動不需要這么做）

　　eg:

var data = {
     obj: {
         num: 1,
         name: 'testeg'
    }
}

watch: {
    obj: {
         handler: function(val) { // 此處注意，handler函數不能為箭頭函數，this會取上下文，而不是組件里的this,此外，深度監聽，必須為handler函數名，否則會無效果
             console.log(val)
             //可以做些相應的處理
        },
        deep: true
    },
　　'obj.name' (val) { // 可以監聽對象的單個屬性
　　　　console.lov(val)
　　}

}    

好了，大家可以自己實驗一番了。自己實驗過的記得才會牢靠哦～。