useWebWorker

使用 Web Worker 执行后台任务的 Hook，避免阻塞主线程。

前置依赖

依赖参数

参数名	类型	说明
deps.Worker	WorkerConstructor	Worker 构造函数
deps.setTimeout	typeof setTimeout	设置定时器
deps.clearTimeout	typeof clearTimeout	清除定时器

环境要求

• 浏览器环境: 使用 Web Worker API

函数签名

function useWebWorker(
  options: WebWorkerOptions,
  deps: WebWorkerDeps
): {
  postMessage: (data: any) => void
  terminate: () => void
  status: Ref<WorkerStatus>
  error: Ref<Error | null>
}

interface WebWorkerOptions {
  scriptURL: string        // Worker 脚本 URL
  maxRetries?: number      // 最大重试次数，默认 3
  timeout?: number         // 超时时间（毫秒），默认 30000
  onMessage?: (data: any) => void
  onError?: (error: Error) => void
}

interface WebWorkerDeps {
  Worker: WorkerConstructor
  setTimeout: typeof setTimeout
  clearTimeout: typeof clearTimeout
}

type WorkerStatus = 'idle' | 'running' | 'error' | 'terminated'

参数

参数名	类型	必填	默认值	说明
options.scriptURL	string	是	-	Worker 脚本的 URL
options.maxRetries	number	否	3	失败后的最大重试次数
options.timeout	number	否	30000	超时时间（毫秒）
options.onMessage	function	否	-	接收消息的回调
options.onError	function	否	-	错误回调
deps	WebWorkerDeps	是	-	依赖注入对象

返回值

类型	说明
{ postMessage, terminate, status, error }	Worker 控制对象

工作原理

1. 创建 Worker：使用 scriptURL 创建 Worker 实例
2. 状态管理：使用 ref 跟踪 Worker 状态（idle/running/error/terminated）
3. 消息通信：
   • postMessage: 向 Worker 发送消息
   • 监听 Worker 的 message 事件
   • 调用 onMessage 回调
4. 错误处理：
   • 监听 Worker 的 error 事件
   • 实现重试机制（最多 maxRetries 次）
   • 调用 onError 回调
5. 超时控制：
   • 发送消息后启动定时器
   • 超时后自动 terminate Worker
6. 清理：terminate 方法终止 Worker 并清理资源

适用于 CPU 密集型计算、大数据处理等场景。