使用 vue-worker 在 Vue.js 中轻松使用 Web Worker

像许多开发人员一样,当Web Workers第一次出现在Web开发场景时,我非常兴奋,梦想着我可以通过它们实现的各种惊人的事情。然而,当我意识到员工必须从Web服务器上托管的单独文件中加载时,我的热情很快就减弱了。这看起来像是一个巨大的痛苦,不值得努力。与API结合在一起,自从我第一次尝试以来,我没有真正使用过工人。

vue-worker的核心前提(或更确切地说, simple-web-worker由同一个作者)是,Web Workers可以从数据URI中初始化,这可能只是一个串行函数。

vue-worker 用一个简单、易于理解的 API 包装了相关的复杂性,允许您像承诺一样轻松执行多头功能。

安装

通过 Yarn 或 NPM 安装 vue-worker:

1# Yarn
2$ yarn add vue-worker
3
4# NPM
5$ npm install vue-worker --save

现在,启用VueWorker插件:

 1[label src/main.js]
 2import Vue from 'vue';
 3import VueWorker from 'vue-worker';
 4import App from 'App.vue';
 5
 6Vue.use(VueWorker);
 7
 8new Vue({
 9  el: '#app',
10  render: h => h(App)
11});

这为您的组件提供了访问this.$worker的能力。

在工人中执行职能

现在,在您的组件中,您可以使用 this.$worker.run(函数, args[])。

这运行一个函数,在组件安装时输出Hello, World!在工人线程中:

 1<script>
 2export default {
 3  mounted() {
 4    this.$worker.run((arg) => {
 5      return `Hello, ${arg}!`
 6    }, ['World'])
 7    .then(result => {
 8      console.log(result)
 9    })
10    .catch(e => {
11      console.error(e)
12    })
13  }
14}
15</script>

可重复使用的工人

您可以创建一个可重复使用的 worker 代理程序,使用此。$worker.create([{message, func}])。

 1<script>
 2export default {
 3  data() {
 4    return {
 5      myWorker: null
 6    }
 7  },
 8
 9  created() {
10    this.myWorker = this.$worker.create([
11      {message: 'message1', func: (arg) => `Output 1 ${arg}`},
12      {message: 'message2', func: () => 'Output 2'}
13    ])
14
15    this.myWorker.postMessage('message1', ['Boop!'])
16    .then(result => {
17      console.log(result)
18    })
19  }
20}
21</script>

你可以做更多的事情,看看 vue-worker和 simple-worker文件。