useWebWorkerFn

类别

Browser

导出大小

927 B

最近修改

2 days ago

相关

useWebWorker

使用简单的语法和 Promise，在不阻塞 UI 的情况下运行耗时函数。alewin/useWorker 的移植版。

🌐 Run expensive functions without blocking the UI, using a simple syntax that makes use of Promise. A port of alewin/useWorker.

示例

源代码在线运行

Current Time: 2026-02-08 18:48:05 501

This is a demo showing sort for large array (5 million numbers) with or w/o WebWorker.
Clock stops when UI blocking happens.

用法

🌐 Usage

基本示例

🌐 Basic example

import { useWebWorkerFn } from '@vueuse/core'

const { workerFn } = useWebWorkerFn(() => {
  // some heavy works to do in web worker
})

使用依赖

🌐 With dependencies

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
    ],
  },
)

使用本地依赖

🌐 With local dependencies

TypeScript

import { useWebWorkerFn } from '@vueuse/core'

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

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

import { useWebWorkerFn } from '@vueuse/core'
const pow = (a) => a * a
const { workerFn, workerStatus, workerTerminate } = useWebWorkerFn(
  (numbers) => pow(numbers),
  {
    timeout: 50000,
    localDependencies: [pow],
  },
)

网络工作者

🌐 Web Worker

在开始使用此功能之前，我们建议你阅读Web Worker文档。

🌐 Before you start using this function, we suggest you read the Web Worker documentation.

信用

🌐 Credit

此函数是 Alessio Koci 的 https://github.com/alewin/useWorker 的 Vue 移植版本，在 @Donskelle 的帮助下完成迁移。

🌐 This function is a Vue port of https://github.com/alewin/useWorker by Alessio Koci, with the help of @Donskelle to migration.