Vue深度監聽(watch的deep：true）造成新舊值相同

watch的基本使用方法

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

以上情況針對的是簡單數據類型，比如數字，字符串，布爾類型等。若遇到復雜類型，如對象、數組，就需要使用深度監聽

watch的深度監聽

背景：普通的監聽只能監聽簡單類型，如果需要監聽某個對象的某個或者某幾個屬性，亦或者是監聽數組中的某個元素變化，就需要使用深度監聽

watch:{
  newTableData: {
    handler: function (value, oldValue) {
      console.log(value, oldValue)
    },
    deep: true
  }
},

使用上面的語法，會造成oldValue的值在每次newTableData變化時，都和value保持一致，變成當前最新的值，失去了oldValue的作用

原因：

vue官方解釋是：在變異 (不是替換) 對象或數組時，舊值將與新值相同，因為它們的引用指向同一個對象/數組。Vue 不會保留變異之前值的副本。

Tips：變異和替換

變異

push()	往數組最后面添加一個元素，成功返回當前數組的長度
pop()	刪除數組的最后一個元素，成功返回刪除元素的值
shift()	刪除數組的第一個元素，成功返回刪除元素的值
unshift()	往數組最前面添加一個元素，成功返回當前數組的長度
splice()	有三個參數，第一個是想要刪除的元素的下標（必選），第二個是想要刪除的個數（必選），第三個是刪除 后想要在原位置替換的值
sort()	sort() 使數組按照字符編碼默認從小到大排序,成功返回排序后的數組
reverse()	reverse() 將數組倒序，成功返回倒序后的數組

替換

不會改變原數組，但總是返回一個新數組

filter	filter() 方法創建一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素。
concat	concat() 方法用於連接兩個或多個數組。該方法不會改變現有的數組
slice	slice() 方法可從已有的數組中返回選定的元素。該方法並不會修改數組，而是返回一個子數組

解決方法

使用序列化和反序列化

　　將計算屬性和偵聽器搭配使用，

　　　　1.首先將需要偵聽的屬性通過JSON.parse和stringfy進行深拷貝，

　　　　2.然后用偵聽器去偵聽計算屬性，這樣就可以得到原來的舊值了

data: () {
    return{
    // 數據為復雜類型
        tableAll:{
           tableData:[]
        }
    }
},

computed:{
// 使用計算屬性進行深拷貝
  newTableData(){
    return JSON.stringify(this.tableAll.tableData)
  }
},
watch:{
// 監聽拷貝后的數據
  newTableData: {
    handler: function (value, oldValue) {
        let obj = JSON.parse(value);
            let obj2 = JSON.parse(oldValue);
        console.log(obj, obj2)
    },
    deep: true
  }
}