Vue3 Vite TypeScript使用Web Worker

Web Worker 为 Web 内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。所以，在我们有大量运算任务时，可以把运算任务交给 Worker 线程去处理，当 Worker 线程计算完成，再把结果返回给 js 主线程。这样，js 主线程只用专注处理业务逻辑，不用耗费过多时间去处理大量复杂计算，从而减少了阻塞时间，也提高了运行效率，页面流畅度和用户体验自然而然也提高了。

具体在vite构建的vue3项目中的使用方法如下：

1.在项目src目录下，新建worker文件夹，新建index.ts

self.onmessage = (e) => {
  console.log('主线程发送过来的数据', e.data)
  const { data } = e
  setTimeout(() => {
    data.name = 'wq'
    self.postMessage(data)
  }, 5000);
}复制

2.在项目中实际应用worker

import Worker from '@/worker/index?worker'
// vite项目如何引用worker 参考https://cn.vitejs.dev/guide/features.html
 
const workderData = ref({
  name: '王琪',
  age: 26
})
const sendData = () => {
  const worker = new Worker()
  worker.postMessage(JSON.parse(JSON.stringify(workderData.value)))
  worker.onmessage = e => {
    console.log('线程完成', e.data)
    workderData.value = e.data
  }
}复制