vue 里用 Web Workers

简介：Web Workers 是运行在后台的javaScript 不影响页面的性能，

tips: web worker 通常用于耗费 CPU 资源的任务、代码仅做demo

事件	描述
postMessage	发送消息
onmessage	消息监听器

App.vue

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

<template>   <div id="app">     <!-- web worker -->     <p>计数: <span id="count"></span></p>     <button @click="startWorker()">开始工作</button>     <button @click="stopWorker()">停止工作</button>     </div> </template>   <script> export default {   name: 'App',   components: {   },   data(){     return {       w: ''     }   },   methods: {     startWorker(){       if(!this.w) {           this.w = new Worker("/worker.js");       }       this.w.postMessage({arr:[1,2,3,4]})       this.w.onmessage=e=>{           document.getElementById("count").innerHTML = e.data.percentage;       }     },     stopWorker(){       this.w.terminate();       this.w = undefined;     }   } } </script>

　　

worker.js

?

1 2 3 4 5 6 7 8 9

this.onmessage = e => {   let num = 0;   setInterval(()=>{     num++;     this.postMessage({       percentage: num     })   }, 1000); }