要只存入新更改的數據，可以在 watch 的回調函數中進行比較，篩選出有變化的屬性并將其存入新數組。以下是一個示例代碼，假設要監聽的對象為 obj：

data() {return {differenceArray: [], obj: { /* 對象的初始屬性 */ }};
},
computed:{newObj(){return JSON.parse(JSON.stringify(this.obj)); }
},
watch:{newObj:{handler(newValue, oldValue){const changedProperties = Object.entries(newValue).filter(([key, value]) => value!== oldValue[key]); this.differenceArray.push(...changedProperties.map(([key, value]) => ({ key, value }))); },deep:true}
}

在上述代碼中，使用 Object.entries() 獲取對象的所有屬性鍵值對。通過 filter() 方法篩選出在新值和舊值中不相等的屬性。然后，使用 map() 方法將這些變化的屬性轉換為包含 key（屬性名）和 value（新更改后的值）的對象，并使用擴展運算符 … 將這些對象添加到 differenceArray 數組中。
這樣，differenceArray 數組中就只會存儲實際發生更改的屬性及其新值。
如果監聽的是數組，可以類似地進行處理。例如，對于數組 arr：

data() {return {differenceArray: [], arr: [ /* 數組的初始元素 */ ]};
},
computed:{newArr(){return [...this.arr]; }
},
watch:{newArr:{handler(newValue, oldValue){const changedIndices = newValue.reduce((indices, value, index) => {if (value!== oldValue[index]) {indices.push(index); }return indices;}, []); changedIndices.forEach(index => {this.differenceArray.push({ index, value: newValue[index] }); });},deep:true}
}

在這個示例中，通過遍歷新數組和舊數組，找出值不相同的索引位置，并將這些索引存到 changedIndices 數組中。然后，遍歷 changedIndices，將對應的索引和新值作為對象添加到 differenceArray 數組中。

要解決 newVal 和 oldVal 一樣的問題，并將新更改的數據存入 differenceArray 數組，可以使用 Vue 的 watch 選項中的 deep: true 來深度監聽對象的變化。以下是修改后的代碼示例：

watch: {newEditTableVariables: {handler(newValue, oldValue) {this.differenceArray = []; // 遍歷 newValue 中的每個項目newValue.forEach(item => {// 在 oldValue 中找到對應的項目const oldItem = oldValue.find(idx => idx.value === item.value); // 如果沒有找到對應的舊項目，或者找到的舊項目與新項目不同，則將新項目添加到 differenceArray 中if (!oldItem || JSON.stringify(oldItem)!== JSON.stringify(item)) { this.differenceArray.push(item);}});console.log(this.differenceArray);},deep: true, // 深度監聽對象內部屬性的變化immediate: true // 立即執行 handler 函數}
}

在上述代碼中，使用 JSON.stringify() 來比較新舊項目是否全等。通過深度監聽，當 newEditTableVariables 對象內部的屬性發生變化時，handler 函數會被觸發。然后，通過遍歷 newValue 并與 oldValue 進行比較，將有差異的項目添加到 differenceArray 數組中。
注意，直接修改對象的屬性可能無法觸發響應式更新，導致 watch 監聽不到變化。如果 newEditTableVariables 是一個復雜的對象，確保在對象內部屬性發生變化時，使用 Vue 提供的方法（例如 Vue.set() 或數組的變異方法）來進行修改，以確保響應式系統能夠正確檢測到變化。另外，添加 immediate: true 是為了在初始化時立即執行一次 handler 函數，以便獲取初始值和后續變化的比較。
如果 newEditTableVariables 是一個數組，并且你使用了一些可能導致 Vue 無法檢測到數組變化的方式（例如直接通過索引修改數組元素），則需要使用 Vue 提供的數組變異方法，如 splice() 等，來確保變化能夠被正確監聽。例如：

this.$set(this.newEditTableVariables, index, newValue); 
// 或使用 splice 方法
this.newEditTableVariables.splice(index, 1, newValue); 
watch: {newEditTableVariables: {handler(newValue, oldValue) {this.differenceArray = []; // 遍歷 newValue 中的每個項目newValue.forEach(item => {// 在 oldValue 中找到對應的項目const oldItem = oldValue.find(idx => idx.value === item.value); // 如果沒有找到對應的舊項目，或者找到的舊項目與新項目不同，則將新項目添加到 differenceArray 中if (!oldItem || JSON.stringify(oldItem)!== JSON.stringify(item)) { this.differenceArray.push(item);}});console.log(this.differenceArray);},deep: true, // 深度監聽對象內部屬性的變化immediate: true // 立即執行 handler 函數}
} 

這段代碼是 Vue 中 watch 選項的使用示例，用于監聽 newEditTableVariables 對象的變化。
以下是對代碼的詳細解釋：
watch：Vue 提供的用于監聽數據變化的選項。
newEditTableVariables：要監聽的數據源。
handler(newValue, oldValue)：當數據源發生變化時觸發的回調函數。接收兩個參數：newValue 表示變化后的新值，oldValue 表示變化前的舊值。
在回調函數內部：
this.differenceArray = []：初始化一個空數組 differenceArray，用于存儲變化的差異數據。
通過 newValue.forEach(item => {…}) 遍歷 newValue 中的每個項目。
在內部的嵌套循環中，使用 oldValue.find(idx => idx.value === item.value) 在 oldValue 中查找與當前 item 的 value 屬性相等的項目，并將其賦值給 oldItem。
通過條件判斷 if (!oldItem || JSON.stringify(oldItem)!== JSON.stringify(item)) 來檢查是否沒有找到對應的舊項目，或者找到的舊項目與新項目不相等（使用 JSON.stringify 進行序列化比較）。如果滿足條件，說明有差異，就將當前項目 item 使用 this.differenceArray.push(item) 添加到 differenceArray 數組中。
deep: true：表示進行深度監聽。當 newEditTableVariables 是一個復雜的嵌套對象時，啟用深度監聽可以確保對象內部屬性的變化也能被監聽到。
immediate: true：表示立即執行 handler 函數。即使在初始化時，newEditTableVariables 的值沒有發生變化，也會立即執行一次 handler 函數，將初始值作為 oldValue 傳入，方便進行一些初始的處理或比較。
總體來說，這段代碼的目的是在 newEditTableVariables 對象發生變化時，找出變化的差異部分并存儲在 differenceArray 數組中，以便后續使用或處理這些差異數據。通過深度監聽和立即執行的設置，能夠更全面地捕捉和處理對象的變化情況。
如果你發現這段代碼中存在“無用的數據”，可能是指在實際使用中，newEditTableVariables 對象中的某些數據或屬性并不是你真正關心的差異部分。要解決這個問題，你可以根據具體的業務需求，進一步優化差異比較的邏輯。例如，只比較特定的屬性、或者針對特定類型的數據進行特殊處理等。
例如，如果你只想比較對象中某些特定屬性的變化，可以修改比較條件：

if (!oldItem || oldItem.specificProperty!== item.specificProperty) { this.differenceArray.push(item);
}

其中 specificProperty 替換為你實際想要比較的屬性名。
或者，如果對象中的數據結構比較復雜，可能需要根據具體情況設計更復雜的差異比較算法，以準確獲取你所需的差異數據。

以上就是文章全部內容了，如果喜歡這篇文章的話，還希望三連支持一下，感謝！