增量更新機制:在數據發生變化時,只對變化的部分進行更新的策略,而不是每次都重新處理全部數據,即:在數據發生變化時,只對變化的部分進行更新的策略,而不是每次都重新處理全部數據
watch: {baseLayerList: {deep: true,handler(newVal, oldVal = []) {// 使用Map來記錄舊值中已處理的項,避免重復處理const oldItemsMap = new Map();// 將舊數據中的所有 subItem 提取出來并以 .id 為鍵存入 Map,便于后續快速查找oldVal.forEach(zxItem => {zxItem.list.forEach(subItem => {oldItemsMap.set(subItem.id, subItem); // 假設每個subItem有唯一id});});// 遍歷新數據并判斷是否新增newVal.forEach(zxItem => {zxItem.list.forEach(subItem => {// 只有當isShow從false變為true,且沒有layer時才處理 const oldSubItem = oldItemsMap.get(subItem.id); // 當前項是“要顯示”的 && (之前不存在該 ID 的項(首次出現) || 之前存在但狀態不是“顯示”) 才會觸發 addJiChuMark 方法。if (subItem.isShow &&(!oldSubItem || !oldSubItem.isShow)) {this.addJiChuMark(subItem);}});});}},}
邏輯分析:
const oldItemsMap = new Map();
oldVal.forEach(zxItem => {zxItem.list.forEach(subItem => {oldItemsMap.set(subItem.id, subItem);});
});oldVal = [{ list: [ { id: 'a', isShow: false }, { id: 'b' } ] },{ list: [ { id: 'c' } ] }
]
====>
oldItemsMap = {'a' => { id: 'a', isShow: false },'b' => { id: 'b' },'c' => { id: 'c' }
}