Vue3 + Vite + TypeScript使用Web Worker

// 在Vue3 + Vite + TypeScript项目中使用Web Worker的方法
 
// 假设有一个worker-example.worker.ts文件，内容如下：
/* worker-example.worker.ts */
 
// 由于在Web Worker中不能直接使用Vue或Vite提供的库，因此需要导出一个函数供主线程调用
export function computeSum(a: number, b: number): Promise<number> {
  return new Promise((resolve) => {
    // 在Web Worker中执行计算
    const sum = a + b;
    // 使用postMessage将结果发送回主线程
    self.postMessage(sum);
  });
}
 
// 在Vue组件中创建和使用Web Worker
 
// 假设有一个Vue组件，如ExampleComponent.vue，内容如下：
<template>
  <div>
    <p>{{ result }}</p>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, ref } from 'vue';
 
export default defineComponent({
  name: 'ExampleComponent',
  setup() {
    const result = ref<number | null>(null);
 
    // 创建Web Worker
    const worker = new Worker(new URL('./worker-example.worker.ts', import.meta.url));
 
    // 监听从Web Worker发送过来的消息
    worker.onmessage = (event) => {
      result.value = event.data;
    };
 
    // 定义一个函数用来发送消息给Web Worker
    function compute(a: number, b: number) {
      worker.postMessage([a, b]);
    }
 
    // 在组件卸载时终止Web Worker
    worker.onmessageerror = () => {
      worker.terminate();
    };
 
    return { result, compute };
  }
});
</script>

这个例子展示了如何在Vue3 + Vite + TypeScript项目中创建和使用一个Web Worker。worker-example.worker.ts文件中导出了一个函数，该函数在Web Worker中执行计算，并通过postMessage将结果发送回主线程。在Vue组件中，我们创建了一个Web Worker实例，监听从Worker发回的消息，并定义了一个函数用来向Worker发送消息。最后，当组件被销毁时，我们通过terminate方法终止Web Worker，以防止内存泄漏。