Vue watch 監聽復雜對象變化,oldvalue 和 newValue 一致的解決辦法。


watch的常規用法:

watch:{
  tempData: function (value, oldValue) {
      console.log(value, oldValue)
  }
}

但是如果需要監聽的數據是對象、內嵌多層的對象后,需要用到watch中的deep屬性。類似於下面這種對象內嵌的對象:

data(){
    return {
        dataList: [
            {
                name: "里斯",
                age: 18,
                sex: ""
            },
            {
                name: "阿里路亞",
                age: 16,
                sex: ""
            }
        ]
    }
}

如果tableData內部屬性發生了變化,通過watch就會打印出newValue,oldValue,但是他們打印出來的結果都是一樣的。因為數據同源,雖然可以監聽到數據發生了變化,但是要比較數據差異就不行了。如果想要得到差異內容,可以結合計算屬性、序列化、反序列化生成新的對象,來避免此問題 。代碼如下;

computed:{
  dataListNew(){
      return JSON.parse(JSON.stringify(this.dataList));
    }
},
watch:{
  dataListNew: {
    handler: function (newValue, oldValue) {
        console.log(newValue, oldValue);
    },
    deep: true
  }
}

 


免責聲明!

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



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