当前位置：首页 > news >正文

在Vue中使用 Web Worker

news 2025/3/10 5:14:55

安装worker-loader

npm install worker-loader

在这里插入图片描述

编写worker.js


onmessage = function (e) {// onmessage获取传入的初始值let sum = e.data;for (let i = 0; i < 200000; i++) {for (let i = 0; i < 10000; i++) {sum += Math.random()}}// 将计算的结果传递出去postMessage(sum);
}

通过行内loader 引入 worker.js

import Worker from "worker-loader!./worker"

在这里插入图片描述

结果

在这里插入图片描述

完整代码

<template><div id="app"><img alt="Vue logo" src="./assets/logo.png" /><HelloWorld msg="Welcome to Your Vue.js App" /><div><button @click="makeWorker">开始线程</button><!--在计算时 往input输入值时 没有发生卡顿--><p><input type="text" /></p></div></div>
</template><script>
import HelloWorld from "./components/HelloWorld.vue";
import Worker from "worker-loader!./worker";export default {name: "App",components: {HelloWorld,},methods: {makeWorker() {// 获取计算开始的时间let start = performance.now();// 新建一个线程let worker = new Worker();// 线程之间通过postMessage进行通信worker.postMessage(0);// 监听message事件worker.addEventListener("message", (e) => {// 关闭线程worker.terminate();// 获取计算结束的时间let end = performance.now();// 得到总的计算时间let durationTime = end - start;console.log("计算结果:", e.data);console.log(`代码执行了 ${durationTime} 毫秒`);});},},
};
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>