vue3中项目优化方法详解(Web Worker的使用)

// worker.js

self.onmessage = function(event) {
  const result = processData(event.data);  // 执行数据处理操作
  console.log("result",result,event);
  postMessage(result); // 将处理后的数据发送回主线程
};

// 执行数据处理操作
function processData(data) {
  // 在这里进行数据处理操作
  let sum = 0;
    for (let i = 0; i < 200000; i++) {
        for (let i = 0; i < 10000; i++) {
            sum += Math.random()
        }
    }
  return '处理结果: ' + data +'/'+ sum;
}

<template>
    <div>
        <button @click="processData">处理数据</button>
        <div>{{ result }}</div>
    </div>
</template>

<script setup>
import { ref } from "vue";

const result = ref('')
function processData() {
    const worker = new Worker('/public/worker.js'); // 创建 Web Worker 参数为worker.js文件路径
    worker.onmessage = (event) => { // 监听Web Worker消息处理
        result.value = event.data; // 处理返回的结果
    };
    worker.postMessage('哇酷哇酷'); // 发送消息给 Web Worker 参数为需要传递的数据
}
</script>

let sum = 0;
    for (let i = 0; i < 200000; i++) {
        for (let i = 0; i < 10000; i++) {
            sum += Math.random()
        }
    }
console.log("sum",sum);