Vue-workerを使用してVue.jsで簡単にWebワーカーを使用する
多くの開発者と同様に、Webワーカーが最初にWeb開発シーンに登場したとき、私は信じられないほど熱心で、彼らを使って達成できるさまざまな驚くべきことを夢見ていました。 しかし、Webサーバーでホストされている個別のファイルからワーカーをロードする必要があることに気付いたとき、私の熱意はすぐに弱まりました。 それは努力する価値のない大きな痛みのように思えました。 APIオーバーヘッドと組み合わせると、最初の試行から現在まで、ワーカーを実際に使用することはありません。 vue-worker を見ると、外部ファイルがなく、シンプルなAPIを使用してVue.jsアプリで何ができるかに突然驚かされます。
vue-worker (つまり、同じauthorによるsimple-web-worker)の大前提は、WebワーカーをデータURIから初期化できることです。 、これは文字列化された関数にすることができます。
vue-worker は、それに伴う複雑さをシンプルでわかりやすいAPIでラップし、promiseのように多頭関数を簡単に実行できるようにします。
インストール
YarnまたはNPMを介してvue-workerをインストールします。
# Yarn $ yarn add vue-worker # NPM $ npm install vue-worker --save
次に、VueWorkerプラグインを有効にします。
src / main.js
import Vue from 'vue'; import VueWorker from 'vue-worker'; import App from 'App.vue'; Vue.use(VueWorker); new Vue({ el: '#app', render: h => h(App) });
これにより、コンポーネントにthis.$worker
にアクセスする機能が提供されます。
ワーカーで関数を実行する
これで、コンポーネント内でthis.$worker.run(function, args[])
を使用できます。
これは、コンポーネントがマウントされたときにワーカースレッドで Hello、World!を出力する関数を実行します。
<script> export default { mounted() { this.$worker.run((arg) => { return `Hello, ${arg}!` }, ['World']) .then(result => { console.log(result) }) .catch(e => { console.error(e) }) } } </script>
再利用可能な労働者
this。$worker.create([{message、func}])を使用して、再利用可能な*「worker」*プロキシを作成できます。
<script> export default { data() { return { myWorker: null } }, created() { this.myWorker = this.$worker.create([ {message: 'message1', func: (arg) => `Output 1 ${arg}`}, {message: 'message2', func: () => 'Output 2'} ]) this.myWorker.postMessage('message1', ['Boop!']) .then(result => { console.log(result) }) } } </script>
できることは他にもたくさんあります。vue-workerとsimple-workerのドキュメントをご覧ください。