Nuxt2中Vuex的splice与set在大型列表/字典下Mutation过慢求助

核心原因 #

这不是你的代码逻辑问题，本质是Vue 2响应式追踪机制的固有性能开销：

• Vue 2会给状态内的对象、数组的每个属性添加getter/setter来追踪依赖。当你修改响应式状态时，bulletsList.splice会触发Vue遍历整个数组检查依赖变化，数据量越大遍历开销越高；
• Vue.set(state.bulletsDict, data.id, data)操作时，Vue不仅要给新加入的data对象添加响应式getter/setter，还要通知所有依赖这个字典的组件重新计算。当字典已有6000个响应式对象时，依赖通知的链条会大幅拉长，导致耗时剧增；
• 你测试的非状态拷贝是普通对象，没有响应式追踪逻辑，Vue.set只是简单的属性赋值，所以速度极快。

优化方法 #

1. 批量更新状态，减少响应式触发次数 #

Vuex的mutation是同步执行的，单次mutation内的多次状态更新会合并成一次视图更新，但单个操作内的响应式修改过多仍会有开销。可以先在非响应式结构中处理数据，再一次性替换状态：

mutations: {
  createBullet(state, data) {
    // 计算目标索引
    const idx = ...

    // 用普通数组/对象做临时处理
    const newList = [...state.bulletsList]
    newList.splice(idx, 0, data)
    
    const newDict = {...state.bulletsDict}
    newDict[data.id] = data

    // 一次性替换响应式状态
    state.bulletsList = newList
    state.bulletsDict = newDict
  }
}

这种方式Vue只需要对整个数组/字典做一次响应式检查，而非逐个元素处理，能大幅降低开销。

2. 关闭不必要的响应式追踪 #

如果部分数据不需要在视图中实时更新，或者可以通过其他方式触发更新，用Object.freeze()冻结数据，避免Vue为其添加getter/setter：

mutations: {
  createBullet(state, data) {
    // 冻结数据，关闭响应式
    const frozenData = Object.freeze(data)
    
    const idx = ...
    state.bulletsList.splice(idx, 0, frozenData)
    Vue.set(state.bulletsDict, data.id, frozenData)
  }
}

注意：冻结后的数据无法通过响应式修改，若需修改需重新生成新的冻结对象。

3. 拆分状态，按需加载 #

如果6000条数据不需要同时在视图中展示，可将状态拆分，比如分页加载——只把当前页面需要的数据放在响应式状态中，其余数据存到非响应式存储（如普通变量、localStorage）中。

4. 升级到Vue 3 + Pinia（长期方案） #

Vue 3用Proxy替代了Vue 2的getter/setter响应式机制，在处理大量数据时性能提升显著。Pinia作为Vue 3的官方状态管理库，比Vuex更轻量高效，若项目有升级空间，这是从根源解决问题的方案。

总结 #

你的代码逻辑本身无问题，性能瓶颈来自Vue 2响应式机制的固有局限。优先尝试批量更新状态的方案，这是成本最低的优化手段；若仍不满足需求，再考虑冻结数据或拆分状态；长期来看，升级到Vue 3+Pinia能彻底解决这类大量数据的响应式性能问题。

内容的提问来源于stack exchange，提问作者toni88x