vue監聽對象里的某個屬性


1、vue中提供了在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實現單個屬性的深度監聽

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM