文章目录
开发过程中渲染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)
})
}
})
},四、特殊注意事项
- 大数组优化：超过1000条数据时建议使用
requestAnimationFrame分批次splice更新。 - Vue 3组合式API：推荐使用
toRaw获取原始数组后再执行splice操作，避免响应式代理开销。 - 使用
watch：复杂数据结构建议使用watch深度监听配合splice。
总结
在Vue中使用splice方法优化渲染主要通过精准控制数组更新范围来实现，splice触发的更新会被加入异步队列批量处理，与WebSocket高频特性完美契合。