文章目录

前言

一、DOM更新优化机制

‌1.虚拟DOM复用性

2.‌响应式系统触发

二、性能对比

三、WebSocket场景实践

‌1.防闪烁原理

2.代码实现示例

四、特殊注意事项

总结

前言

开发过程中渲染websocket返回的数据时，经常会遇到更新数据闪烁的问题，咱们可以通过splice实现局部更新，避免整列表重渲染。

一、DOM更新优化机制

‌1.虚拟DOM复用性

直接替换整个数组会导致虚拟DOM重新生成所有节点，而splice仅修改特定索引元素，保留未变动节点的复用性‌。
示例场景：当WebSocket推送[88, 92, 95]时，仅更新第二个元素值而非全量替换数组‌。‌

2.‌响应式系统触发

Vue 2中直接通过索引赋值（如arr‌:ml-citation{ref="1" data="citationList"}=newValue）无法触发视图更新，必须使用splice或Vue.set确保响应式追踪‌。
Vue 3的Proxy机制虽支持索引赋值，但splice仍能更精准控制更新范围‌。

二、性能对比

操作方式	内存占用	DOM操作次数	适用场景
直接赋值	高	全量替换	数据完全变更时
splice	低	局部更新	部分数据增量更新

三、WebSocket场景实践

‌1.防闪烁原理

全量替换会导致短暂白屏（旧DOM移除与新DOM创建间隙），splice保持现有DOM结构仅更新文本内容‌。
配合<transition-group>可实现平滑过渡动画‌。

2.代码实现示例

代码如下（示例）：

/**
* @description:处理Websocket的数据
* @return {*}
*/
pushData(wsData) {const nowData = wsData.dictMap[0]const map = new Map(Object.entries(nowData))this.paramList.forEach((item, index) => {if (map.has(item.id)) {this.paramList.splice(index, 1, {id: item.id,name: item.name,value: map.get(item.id)})}})
},