Web Worker组合式函数：将CPU密集型任务隔离到线程避免卡顿

封装useWorker组合式函数，将Vue组件中的计算逻辑转移到Web Worker，利用Transferable对象优化大数据传输，并处理Worker内无法访问DOM的限制。 · 难度：入门 · +10XP

Web Worker组合式函数

计算密集型逻辑（如数据处理、加密）会阻塞主线程导致UI卡顿。本教程编写一个useWorker组合式函数，自动创建Worker线程，并通过postMessage通信。你学会如何使用Transferable数组缓冲区传输大型二进制数据（避免拷贝）。还会探讨如何处理Worker内的错误、超时以及主线程与Worker之间响应式状态同步。

import { ref, onUnmounted } from 'vue'
export function useWorker(fn) {
  const result = ref(null)
  const worker = new Worker(
    URL.createObjectURL(new Blob([(${fn.toString()})()], { type: 'text/javascript' }))
  )
  worker.onmessage = (e) => { result.value = e.data }
  onUnmounted(() => worker.terminate())
  return { result, post: (data) => worker.postMessage(data) }
}
// 使用：const { result, post } = useWorker(() => self.onmessage = e => { ...计算逻辑 })