Vue中的變化監(jiān)聽是通過一個watch屬性來實現(xiàn)的，可以在Vue實例中使用watch屬性來監(jiān)聽數(shù)據(jù)變化，以便在數(shù)據(jù)發(fā)生改變的時候自動執(zhí)行相關(guān)操作。

watch: {
arr: {
handler(newVal, oldVal) {
console.log('arr發(fā)生了改變')
},
deep: true
}
}

Vue的watch屬性可以通過配置對象來監(jiān)視數(shù)組的變化。在數(shù)組中添加、刪除或替換元素都會觸發(fā)該數(shù)組的監(jiān)聽。在watch的handler方法中，我們可以獲取到新舊值。

由于Vue并沒有通過ES6的Proxy API來監(jiān)聽數(shù)組，所以在監(jiān)聽數(shù)組時需要使用Vue提供的deep屬性來開啟對象或數(shù)組的深度觀測。當deep屬性為true時，Vue會遍歷對象或數(shù)組中的所有屬性并遞歸地監(jiān)聽它們。

watch: {
arr: {
handler(newVal, oldVal) {
console.log('arr發(fā)生了改變')
},
deep: true
}
}

雖然Vue的deep屬性可以實現(xiàn)數(shù)組的深度監(jiān)聽，但是由于遍歷和監(jiān)聽所有屬性的性能問題，所以在處理大型數(shù)組時可能會導致性能問題。因此，我們可以采用其他方法來監(jiān)聽數(shù)組變化。

Vue的官方文檔提供了一種使用$watch方法來監(jiān)聽數(shù)組變化的辦法。$watch方法接受兩個參數(shù)：被觀察的屬性名和回調(diào)函數(shù)。回調(diào)函數(shù)中包含最新值和舊值兩個參數(shù)。在數(shù)組變化時，我們可以在回調(diào)函數(shù)中通過計算出差異（新增、刪除、替換等），來手動執(zhí)行相應(yīng)的操作。

mounted() {
this.$watch('arr', (newArr, oldArr) =>{
const diff = this.getDiff(newArr, oldArr)
// 根據(jù)差異執(zhí)行相應(yīng)操作
})
},
methods: {
getDiff(newArr, oldArr) {
let added = [], deleted = [], replaced = []
// 計算差異
return {
added,
deleted,
replaced
}
}
}

在使用$watch方法監(jiān)聽數(shù)組變化時，我們需要注意幾點問題。首先，$watch方法的第二個參數(shù)是一個回調(diào)函數(shù)，需要在組件實例掛載之后調(diào)用，否則將無法成功監(jiān)聽數(shù)組變化。其次，需要在getDiff方法中計算數(shù)組變化的差異并手動執(zhí)行相應(yīng)操作，否則Vue將無法實時更新DOM。

總的來說，Vue提供了多種方法來監(jiān)聽數(shù)組變化。我們可以根據(jù)實際情況來選擇合適的方法，以便在性能和代碼構(gòu)造上達到最優(yōu)化。