vue中如何深度監聽一個對象？

大家都知道，Vue項目中對數據的監聽，提供了一個很好的鈎子watch，watch可以極其方便的監聽我們常用數據類型值的變化，但通常當我們想監聽一個對象中，某個屬性值的變化時，很難達到我們預期的效果。那么如何實現對象屬性的深度監聽呢？

1.  vue中提供了在watch監聽時設置deep:true 就可以實現對對象的深度監聽;

• • 　demo:   https://run.iviewui.com/oW2m2Jo7

• • 　直接監聽對象--代碼如下： 

    watch:{
      obj:{ //監聽的對象
        deep:true, //深度監聽設置為 true
        handler:function(newV,oldV){
          console.log('watch中：',newV)
        }
      }
    }

• • 　監聽對象下某個屬性--代碼如下：

        data () {
          return {
            obj:{
              name:'夜空中最亮的星星',
              age:18
            }
          }
        },
        watch:{
          'obj.name':{
            deep:true,
            handler:function(newV,oldV){
              console.log('watch中：',newV)
            }
          }
        }

　　2.利用computed配合watch實現單個屬性的深度監聽；

• • 　demo:  https://run.iviewui.com/7zwv09qd

• • 　代碼如下： 

        data () {
          return {
            obj:{
              name:'夜空中最亮的星星',
              age:18
            }
          }
        },
        computed:{
          name(){
            return this.obj.name;
          }
        },
        watch:{
          name(newV){
            console.log('watch中name為：',newV)
          }
        }