是否可以访问.vue组件内的Web Workers

debugcn 发表于 Dev

贾瓦德·艾哈迈德（Jawad Ahmed）

因此，我正在考虑创建一个使用这个我发现的Web工作程序的应用程序，该程序会生成rubik的多维数据集争夺（实际上是一个密集的过程，以生成随机状态争夺，尤其是对于较大的多维数据集，因此对于这种情况Web工作者是必需的）。我想知道是否可以从Vue组件内部访问此Web Worker（在提供Worker文件或访问它时是否存在任何问题。如果可能，我将如何使其工作？

布莱克斯

是的，可以，这是一个演示：

Vue.component('my-component', {
  template: '#my-component',
  data() {
    return {
      cube: '-- no data yet --',
      worker: null
    };
  },
  created() {
    this.initWorker();
  },
  beforeDestroy() {
    this.destroyWorker();
  },
  methods: {
    initWorker() {
      // Here, just for this demo to work, I'm not using an external file
      // for the worker. Instead, I use a Blob. It's still a real Worker!
      // See https://stackoverflow.com/a/6454685/1913729
      const scriptBlob = new Blob(
        [ document.querySelector('#worker-script').textContent ],
        { type: "text/javascript" }
      );
      this.worker = new Worker(window.URL.createObjectURL(scriptBlob));
      this.worker.onmessage = e => this.onCubeReady(e.data);
    },
    destroyWorker() {
      this.worker.terminate();
    },
    scrambleCube() {
      this.cube = '-- Scrambling cube... --'
      this.worker.postMessage('Gimme a cube');
    },
    onCubeReady(cube) {
      this.cube = cube;
    }
  }
});

var vm = new Vue({
  el: '#app'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.min.js"></script>

<div id="app">
  <my-component></my-component>
</div>

<template id="my-component">
  <div>
    <button @click="scrambleCube">Scramble cube</button>
    <pre>{{cube}}</pre>
  </div>
</template>

<!-- This is just for the demo, and won't be parsed
     because of type="javascript/worker".
     we load it into a Blob to make it a worker -->
<script type="javascript/worker" id="worker-script">
self.addEventListener("message", onMessageReceive);

function onMessageReceive(e) {
  console.log(`Worker received a message`);
  const res = heavyProcessing();
  self.postMessage(res);
}

function heavyProcessing() {
  const endTime = Date.now() + 2000;
  while (Date.now() < endTime) {}
  return 'CUBE MADE BY A WORKER';
}
</script>