vue 里用 Web Workers

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

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

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

App.vue

<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

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