Web Worker 的核心价值是后台计算不阻塞主线程，适合纯计算任务如大数据处理、图像操作、加解密等；需独立文件、Transferable 零拷贝通信、主线程管理响应式。
直接在后台线程跑计算，主线程不卡、UI照常响应——这是 Web Worker 在 JS 项目中最核心的价值。关键不在“启一个线程”，而在“传得准、算得稳、收得干净”。
哪些任务适合交给 Worker
纯计算、无 DOM、不依赖 Vue/React 响应式系统：
- 大数据排序、过滤、聚合（比如处理几万条日志或表格）
- 图像像素级操作（灰度转换、卷积滤镜、缩放）
- 加密解密、哈希计算（SHA-256、Base64 批量转）
- 物理模拟、路径规划、深度递归遍历
避免放入：任何涉及 document、localStorage、this.$refs、DOM 操作 或尝试触发响应式更新的逻辑。
基础用法：原生写法（推荐轻量场景）
Worker 必须是独立 JS 文件，不能内联或传函数：
- 新建 worker.js（与组件同目录即可）：
self.onmessage = e => {
const result = heavyCompute(e.data);
self.postMessage(result);
}; - 主线程中创建并通信：
const worker = new Worker(new URL('./worker.js', import.meta.url));
worker.postMessage({ data: largeArray });
worker.onmessage = e => { console.log('结果:', e.data); };
// 卸载时必须终止，防止内存泄漏
onUnmounted(() => worker.terminate());
高效通信与数据传输
大数组、图像数据等别直接 postMessage，否则深拷贝严重拖慢：
- 用 Transferable 实现零拷贝：
const buffer = typedArray.buffer;
worker.postMessage({ buffer }, [buffer]); - 只传必要字段，避免整个对象；高频通信可考虑分块或状态码代替全量数据
- 不可传：函数、正则、undefined、循环引用对象、DOM 节点
与响应式数据安全联动
Worker 不认识 ref、reactive、computed，所有联动都在主线程完成：
- 收到 onmessage 后，直接赋值给 ref 或 reactive 对象，Vue 自动更新 UI
- 不要在 Worker 里调 nextTick、watch 或修改 computed —— 这些都无效
- 错误需透传回主线程，统一由组件内 try/catch 或 onerror 处理
