在vue项目中使用webWorker

使用web worker可以进行多线程的数据处理,  我们可以把包含大量数据的逻辑交给webworker, 能避免在数据处理过程中造成的页面卡顿.

1.首先, 你可以在项目根目录的任意目录下, 新建一个webworker的文件

直接调用预置方法postMessage来传递数据, 使用onmessage来接收数据

 

2. 之后是在对应vue文件中创建worker

  const worker = new Worker(new URL('./webWorker.ts', import.meta.url), {
    type: 'module',
  });

  worker.onmessage = (data: any) => {
    console.log('获取到处理的数据', data);
  };

  function sendMessage() {
    worker.postMessage(['第一条', '第二条', '第三条']);
  }

需要注意的是, 为了让worker文件放在vue项目下, 并且支持ts和ES, 需要用new URL预置方法来处理路径, 并将第二个参数的type设置为module.

否则, 必须把worker文件放在public中, 并且不支持import导入外部内容

 

另外, worker只能传递可序列化的数据, 复杂的数据可能需要通过JSON转换后才能传递