将耗时计算移出主线程是优化 Vue 大规模计算的核心：用 Web Worker 处理不依赖 DOM 的预处理任务，时间分片应对必须在主线程执行的大循环，冻结只读数据减少响应式开销，纯函数封装提升可测性与复用性。
把耗时计算从主线程移出去，是处理 Vue 应用大规模计算的核心思路。Vue 的响应式更新和 DOM 渲染都在主线程运行，一旦塞入大量循环、解析、比对或坐标转换等操作，页面立刻卡顿甚至假死。
用 Web Worker 搬走重计算
适合数据预处理类任务，比如地图撒点前的坐标转换、日志聚合、JSON 解析与筛选、批量格式校验等——这些不依赖 DOM、也不需要直接操作 Vue 实例。
- 安装
worker-loader，并在vue.config.js中配置规则，确保.worker.js文件被正确打包为独立脚本 - Worker 文件里不能用
window或document，改用self；通信靠postMessage和onmessage - 在 Vue 组件中创建 Worker 实例，传入原始数据，监听返回结果再更新响应式状态
- 注意：Worker 通信有开销，不适合高频小量数据，单次传输建议控制在 MB 级以内
分批执行避免阻塞 UI
当必须在主线程完成、但又不能一次性干完（比如遍历 5 万条记录生成渲染结构），可用时间分片切碎任务。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 用
setTimeout或requestIdleCallback把大循环拆成若干小块，每块执行后让出控制权 - 配合
v-for的:key和track-by逻辑，确保增量渲染不触发全量重绘 - 适合场景：初始化数据结构转换、前端导出前的数据整理、离线搜索索引构建
冻结静态大数据，减少响应式开销
如果某批数据只读不改（如字典表、行政区划树、历史报表原始快照），别让它进 Vue 响应式系统。
立即学习“前端免费学习笔记（深入）”；
- 加载后立即用
Object.freeze()封装整个对象或数组，Vue 2/3 都会跳过其 getter/setter 收集 - 若需局部响应式（例如只监听某个字段变化），可只对动态部分做响应式，其余保持冻结
- 注意：冻结后无法再通过赋值修改属性，如需更新，得替换整个对象
把计算逻辑下沉到非响应式层
不是所有“计算”都该写在 computed 里。尤其当结果不直连模板，或仅用于后续 API 请求、Worker 输入时，优先用普通方法。
- 避免深度
watch+deep: true监听大数组，改用事件驱动：数据到达后再手动调用处理函数 - 把复杂逻辑封装成纯函数（无副作用、输入输出确定），便于测试、复用，也更容易抽到 Worker 中
- 计算属性适合“模板强依赖、复用率高、依赖简单”的场景；其他情况，方法更可控
