js逻辑:【增量更新机制】
增量更新机制:在数据发生变化时,只对变化的部分进行更新的策略,而不是每次都重新处理全部数据,即:在数据发生变化时,只对变化的部分进行更新的策略,而不是每次都重新处理全部数据
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' }
}