Skip to content

useWebWorkerFn

使用 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: 2025-08-18 22:16:35 979

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

ts
import { 
useWebWorkerFn
} from '@vueuse/core'
const {
workerFn
} =
useWebWorkerFn
(() => {
// some heavy works to do in web worker })

使用依赖

¥With dependencies

ts
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

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

网络工作者

¥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.