这篇文章假设您具有Javascript和Vue的基本知识。单线程JavaScript作为一种单线程编程语言，Javascript一次只能执行一组指令，这意味着所有其他进程必须等待一条指令完成才能执行下一个进程。如果我们必须进行繁重的处理并且还希望用户仍然能够与我们的应用程序交互，这将在我们的Web应用程序中产生速度问题。例如，如果我们需要计算多个投资包的投资回报率，我们仍然需要保证这些进程是非阻塞的，不运行在主线程上，这样我们才能在主线程上执行其他任务，比如发起网络请求……输入网络工作者。注意：阻塞是指串行处理，一次一个操作。另一方面，非阻塞代码（异步）可以并行（或多线程）运行WebWorkers允许我们在后台线程中运行进程，并在这些进程完成时通知主线程。这极大地提高了性能，因为我们不需要将主线上的所有内容分块。WebworkersWebWorkers是一种让Web内容在后台线程中运行脚本的简单方法，可以在不干扰用户界面的情况下执行任务。创建后，worker可以通过向代码指定的事件处理程序发布消息来向创建它的JavaScript代码发送消息（反之亦然）。Javascript中Webworker的主线程使用“Worker”构造函数创建Worker，该构造函数只接受一个参数，即Worker文件的路径。Worker包含将在Worker线程中运行的代码；Worker在与当前窗口不同的全局上下文中运行。数据通过**messages**在工作线程和主线程之间传递——主线程和工作线程使用postMessage()方法发送消息，并使用onmessage处理程序响应发送的消息。下面是一个使用Javascript实现webworker的简单示例：MartinsOnuoha/js-webworker-example[1]在Vue中使用WebWorker要在Vue应用程序中使用webworker，我们可以使用vue的webworker包装器，例如vue-worker[2]]包，或在低级别实现它（从头开始构建）。我将保持简单，并在没有vue-worker包的情况下构建这个示例，这样我们就可以看到引擎盖下发生了什么。让我们设置我们的vue应用程序。为了简单起见，我将在纯HTML页面中使用VueCDN，而不是使用Vue-CLI来生成项目。让我们设置应用程序文件夹。我们的文件夹结构如下所示：app我们将在Vue中实现相同的Javascript示例[3]（一个倒数计时器），并且由于倒数计时器是一个长时间运行的进程，我们将把它委托给我们的webworker，并且当我们的计数器值可以被10整除时，在我们的主线程上触发一个方法从这个API[4]中获取随机狗图像。结果看起来像这样[5]：https://silent-wish.surge.sh/HTML在index.html文件中，我们将构建我们的标记，包括vue-nextCDN链接、我们的主脚本文件和Vue的挂载点。在这里，我们在顶部导入了CSS文件，在底部导入了脚本。我们还显示数据对象的计数器属性（如果可用）。使用图像标签，我们还会在可用时呈现“dogImage”值。接下来，我们将在app.js入口文件中设置vue应用程序。因为这个示例应用程序严重依赖于WebWorkers，所以在实例化一个新的Worker类之前，我们需要先检查浏览器是否支持Workers。script/app.js接下来，我们设置App对象。constApp={...}我们将有两个数据属性：constApp={data(){return{dogImage:null,counter:0,}}}在我们的方法对象中，我们将创建一个方法来从dog在API中获取随机的狗图像。方法：{getDogImage(){fetch('https://dog.ceo/api/breeds/image/random').then((response)=>response.json()).then((data)=>{this.dogImage=data.message})}}最后，在mountedhook中，我们会第一次调用getDogImage方法，然后在我们的worker对象上设置一个onmessage监听器来监听worker线程的更新，我们检查worker是否发送的计数器值可以被10整除，如果是，我们再次调用getDogImage方法。...mounted(){this.getDogImage()worker.onmessage=(e)=>{this.counter=e.dataif(this.counter%10===0){this.getDogImage()}}},...然后，我们将App对象挂载到#app元素上。整个app.js文件应该是这样的：我们将添加一些样式以增加美感。将其添加到app.css文件中。您可以在VScode上使用LiveServer启动应用程序。源码查看所用示例应用的源码：https://github.com/MartinsOnuoha/vue-webworker-example原文：https://medium.com/js-dojo/using-web-workers-vue-applications-3de99f4f3371作者：VictorOnuohaMartins
