将应用逻辑放在Vuex还是Vue组合式API中运行速度更快？

核心性能差异结论 #

通常情况下Vuex的运行速度并不会显著慢于原生组合式API，两者的性能差距远小于代码写法不合理带来的性能损耗，2000长度的数组操作量级下，框架层面的开销基本可以忽略。

两者的性能差异主要来自于数据流转流程和响应式触发范围的不同，而非基础计算能力的差异：

• Vuex的状态变更需要严格走 action → commit → mutation 的流程，这个过程自带devtool日志记录、状态校验的轻量开销，单就逻辑执行速度而言，确实会比直接写在组合式Hook里的纯函数慢一点点，但这个差异在万级以下的数组操作场景下完全感知不到。
• 真正容易导致Vuex性能变差的原因是全局响应式的冗余触发：如果大数组挂载在全局Vuex状态下，任意数组项的修改都会触发所有依赖该数组（或数组项）的组件重新计算，如果你有大量组件订阅了这个数组的状态，不必要的重渲染才是性能瓶颈的核心，和action本身的执行速度无关。

两种方案的适用场景 #

适合继续使用Vuex Action的情况 #

• 该大数组需要跨多个非关联组件（比如不同路由、不同模块的组件）共享读写
• 你已经针对Vuex做了配套的持久化、日志追踪等工程化配置，迁移成本较高

这种场景下不需要重构为组合式Hook，只需要优化现有Vuex用法即可提升性能：

• 避免单个数组项修改频繁提交mutation，尽量批量修改完成后一次性提交
• 不需要响应式的数组项可以用Object.freeze()冻结，减少响应式监听开销
• 组件尽量按需依赖具体的数组项，不要直接依赖整个大数组触发不必要的重计算

适合迁移到组合式API Hook的情况 #

• 该大数组仅在单个组件或少数几个父子/同模块组件内使用，不需要全局共享
• 你需要更灵活的响应式控制，比如用shallowRef包裹数组仅监听数组整体替换、部分非响应式操作直接处理原始数组副本最后再一次性更新视图

这种场景下封装组合式Hook的性能会更高，同时逻辑内聚性更好，复用成本也更低，完全可以替代Vuex Action的作用。

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