页面性能优化

优化点	解决方案	效果
1. ### 双向绑定数量过多 竞对设置单元格内部涉及双向绑定的输入组件过多，线上页面最多有88个 该和抽屉中的编辑表格一样的组件，共计**930+个（按每行最少6个来计算的）**双向绑定的组件，严重拖累页面性能。 数据计算依据：88 = 竞对信息单元格数，930 = 155（编辑表格行数）*6（每行最低的双向绑定组件数） 问题截图 ：	将竞对设置的编辑表格 改为纯文本展示表格 ，全局仅维护一个编辑表格，点击对应单元格的编辑按钮后，显示抽屉，将目标单元格数据带入编辑表格进行编辑操作，编辑完成后将修改后的数据同步到目标单元格对应的数据对象中。	通用的编辑表格组件数量由88个 缩减到1个 ，双向绑定组件由930+ 个缩减到20个以内（线上数据每个编辑表格大概2-3行）
2. 高并发重复请求​	这是在子组件请求接口，没有做接口缓存，导致调用N次请求。	缓存后，不切换城市只请求一次。
3. 树型选择器渲染函数时间复杂度高 线上场景组织节点数为5377个 ，当选择父级节点时，树型选择器renderTag方法使用了**O(n2)**的查找父节点遍历方法。 该renderTag方法在初始化、点击选择框、选择值、选择框失焦等多个事件中都会触发。 问题截图：	使用Map进行缓存，将函数时间复杂度降为O(n) javascript // 优化前：filter+some 二层嵌套循环 时间复杂度为O(n2) const allTagList = data.filter((item) => { // 如果 item 有父节点，检查父节点是否选中 if (item.parentId) { // 查找时间为O(n) return !data.some((dataItem) => dataItem.id === item.parentId); } // 如果 item 没有父节点，直接选中 return true; }); // 优化后：Map直接读数时间复杂度为O(n) const allTagList = data.filter((item) => { // 如果 item 有父节点，检查父节点是否选中 if (item.parentId) { // 使用 Map 的 has 方法，时间复杂度 O(1) return !selectedIdMap.has(item.parentId); } // 如果 item 没有父节点，直接选中 return true; });
4. 写法优化。 使用Set （n1）查找 避免模版直传方法渲染，替换为计算属性 ​