当前位置：首页 > news >正文

js逻辑：【增量更新机制】

news 来源：原创 2025/6/24 6:51:02

增量更新机制：在数据发生变化时，只对变化的部分进行更新的策略，而不是每次都重新处理全部数据，即：在数据发生变化时，只对变化的部分进行更新的策略，而不是每次都重新处理全部数据

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' }
}