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

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

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

直接監聽對象–代碼如下：

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：利用computed配合watch實現單個屬性的深度監聽

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