useWebWorkerFn

Promise を利用したシンプルな構文で、UI をブロックせずに高負荷な関数を実行します。alewin/useWorker の移植版です。

使用法

基本的な例

import { useWebWorkerFn } from '@vueuse/core'

const { workerFn } = useWebWorkerFn(() => {
  // Web Worker で行う重い作業
})

依存関係を使用する場合

import { useWebWorkerFn } from '@vueuse/core'

const { workerFn, workerStatus, workerTerminate } = useWebWorkerFn(
  dates => dates.sort(dateFns.compareAsc),
  {
    timeout: 50000,
    dependencies: [
      'https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.js', // dateFns
    ],
  },
)

ローカル依存関係を使用する場合

import { useWebWorkerFn } from '@vueuse/core'

const pow = (a: number) => a * a

const { workerFn, workerStatus, workerTerminate } = useWebWorkerFn(
  numbers => pow(numbers),
  {
    timeout: 50000,
    localDependencies: [pow]
  },
)

Web Worker

この関数を使用し始める前に、Web Worker のドキュメントを読むことをお勧めします。

クレジット

この関数は、Alessio Koci による https://github.com/alewin/useWorker の Vue 移植版であり、@Donskelle の協力を得て移行されました。