想象一下，JavaScript的主线程就像一条单行道。所有任务（显示页面、响应用户点击、处理数据）都必须排着队，一个一个通过。如果某个任务（比如计算一个超大表格的数据）特别费时间，它就会堵住这条单行道。后面的任务（比如你点击按钮）只能干等着，页面就“卡死”了。

Web Worker的作用，就是给JavaScript这条单行道开辟几条专用的小路。它允许你创建额外的“工人线程”（Worker），把那些特别耗时、但又不需要直接操作页面元素（dom）的苦力活（比如复杂计算、处理大批量数据）交给这些工人去后台默默完成。主线程（那条单行道）只需要负责页面的显示和与用户的互动，两边各忙各的，互不干扰。

简单说，Web Worker就是浏览器提供给JavaScript使用的后台线程。

它的核心价值在于：让耗时的任务在后台运行，不阻塞主线程，保持页面流畅响应。

关键特点：

它能解决什么问题？ 主要用来处理那些需要大量CPU计算（算力密集型）的任务，避免它们拖慢整个页面。例如：

// worker.js - 后台工人的工作手册
// 工人监听主线程发来的消息
self.onmessage = function(event) {
  console.log('工人收到任务:', event.data);
  // 调用耗时计算函数
  const result = doHeavyWork(event.data);
  // 计算完成，把结果发回给主线程
  self.postMessage(result);
};

// 模拟一个非常耗时的计算任务
function doHeavyWork(number) {
  let total = 0;
  for (let i = 0; i < 1000000000; i++) { // 循环10亿次！
    total += number;
  }
  return total;
}

self 在Worker内部代表Worker自身。

onmessage 用于接收主线程发来的消息，消息数据在 event.data 里。

postMessage() 用于把计算结果发送回主线程。

// 创建一个新工人，告诉他工作手册在'worker.js'
const myWorker = new Worker('worker.js');

// 给工人发送任务：计算10累加10亿次
myWorker.postMessage(10);
console.log('主线程：任务已派发，我可以继续做别的事！');

// 监听工人发回的消息（结果）
myWorker.onmessage = function(event) {
  console.log('主线程收到工人计算结果:', event.data);
};

// 页面其他按钮、动画等完全不受影响，依然流畅！

new Worker('worker.js') 创建并启动一个Worker。

worker.postMessage(data) 向Worker发送数据。

worker.onmessage = function(event) {...} 处理Worker返回的结果，结果在 event.data 里。

// sortWorker.js
self.onmessage = function(event) {
  // 接收到主线程发来的大数组
  const dataArray = event.data;
  // 在后台进行排序（这里用简单数字排序示例）
  const sortedArray = dataArray.sort((a, b) => a - b);
  // 把排序好的数组发回主线程
  self.postMessage(sortedArray);
};

// 创建排序工人
const sortWorker = new Worker('sortWorker.js');

// 生成一个包含10万个随机数的超大数组
const hugeArray = Array.from({ length: 100000 }, () => Math.floor(Math.random() * 1000000));
console.log('主线程：生成10万条数据完成，开始排序...');

// 把大数组发送给Worker排序
sortWorker.postMessage(hugeArray);

// 设置接收排序结果的监听器
sortWorker.onmessage = function(event) {
  const sortedData = event.data;
  console.log('主线程：10万条数据排序完成！用时:', performance.now() - startTime, '毫秒');
  // 拿到排序后的数据，更新页面显示（这部分在主线程操作DOM）
  // updateUI(sortedData);
};

// 记录开始时间
const startTime = performance.now();

// 排序期间，用户依然可以流畅操作页面其他部分！

排序这个耗时操作完全移交给Worker在后台执行。

主线程发送数据后立即返回，用户可以继续交互。

Worker排序完成后，主线程收到消息，再用排序好的数据更新页面显示。

// doubler.worker.js
self.onmessage = function(event) {
  const number = event.data;
  const doubled = number * 2; // 简单示例：计算数字的2倍
  self.postMessage(doubled);
};

import { ref, onUnmounted, isRef } from 'vue';

export function useWorker(workerUrl) {
  // 存储Worker返回的结果
  const result = ref(null);
  // 存储可能的错误
  const error = ref(null);
  // 标记计算是否正在进行
  const isLoading = ref(false);

  // 创建Worker实例
  const worker = new Worker(workerUrl);

  // 向Worker发送数据的方法
  function postMessageToWorker(data) {
    isLoading.value = true; // 开始计算
    result.value = null;    // 清空旧结果
    error.value = null;     // 清空旧错误
    worker.postMessage(isRef(data) ? data.value : data); // 处理可能是ref的情况
  }

  // 监听Worker返回的消息
  worker.onmessage = function(event) {
    result.value = event.data;
    isLoading.value = false; // 计算完成
  };

  // 监听Worker发生的错误
  worker.onerror = function(err) {
    error.value = err.message || 'Web Worker执行出错';
    console.error('Worker错误:', err);
    isLoading.value = false;
  };

  // 组件卸载时，清理Worker，避免内存泄漏
  onUnmounted(() => {
    worker.terminate();
  });

  // 返回给组件使用的API：发送数据的方法、结果、错误状态、加载状态
  return {
    postMessage: postMessageToWorker,
    result,
    error,
    isLoading
  };
}

封装了Worker的创建、通信、错误处理和销毁逻辑。

使用Vue的ref管理结果、错误和加载状态，使其具有响应性。

在组件卸载时自动终止Worker，避免资源浪费。

<template>
  <div>
    <input type="number" v-model.number="inputValue" />
    <button @click="calculateDouble" :disabled="isLoading">
      {{ isLoading ? '计算中...' : '计算2倍' }}
    </button>
    <p>结果：{{ result }}</p>
    <p v-if="error" class="error">错误：{{ error }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useWorker } from './useWorker';

// 获取当前组件文件所在目录，动态构造Worker文件的URL (Vite/webpack)
const workerUrl = new URL('./doubler.worker.js', import.meta.url).href;
const { postMessage, result, error, isLoading } = useWorker(workerUrl);

const inputValue = ref(5); // 输入的数字

function calculateDouble() {
  postMessage(inputValue.value); // 发送输入值给Worker
}
</script>

<style scoped>
.error { color: red; }
</style>

组件通过useWorker hook轻松获得与Worker交互的能力。

输入值绑定到inputValue。

点击按钮调用postMessage发送数据。

模板中直接绑定result、error和isLoading状态，自动更新UI。

用户体验： 点击按钮后，按钮变为禁用状态显示“计算中...”，页面其他部分完全不受影响。计算完成后，结果显示出来。如果后台计算非常耗时，这种流畅感对比在主线程计算带来的卡顿，优势极其明显。