VueUse中文文档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.
例子
当前时间: 2023-03-31 11:59:08 268
这是一个演示，展示了使用或不使用 WebWorker 对大型数组 （500 万个数字） 进行排序 。
This is a demo showing sort for large array (5 million numbers) with or w/o WebWorker.
发生 UI 阻塞时停止。
Clock stops when UI blocking happens.
This is a demo showing sort for large array (5 million numbers) with or w/o WebWorker.
发生 UI 阻塞时停止。
Clock stops when UI blocking happens.
Usage
基本用法(Basic example)
js
import { useWebWorkerFn } from '@vueuse/core'
const { workerFn } = useWebWorkerFn(() => {
// 在 web worker 中做一些大工作量事情
// some heavy works to do in web worker
})
import { useWebWorkerFn } from '@vueuse/core'
const { workerFn } = useWebWorkerFn(() => {
// 在 web worker 中做一些大工作量事情
// 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
],
},
)
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
],
},
)
Web Worker
在开始使用此函数之前，我们建议您阅读Web Worker文档。
Before you start using this function, we suggest you read the Web Worker documentation.
Credit
这个函数是 Alessio Koci 的 Vue 的端口，在 @Donskelle的帮助下迁移。
This function is a Vue port of https://github.com/alewin/useWorker by Alessio Koci, with the help of @Donskelle to migration.
Type Declarations
typescript
export type WebWorkerStatus =
| "PENDING"
| "SUCCESS"
| "RUNNING"
| "ERROR"
| "TIMEOUT_EXPIRED"
export interface UseWebWorkerOptions extends ConfigurableWindow {
/**
* Number of milliseconds before killing the worker
*
* @default undefined
*/
timeout?: number
/**
* An array that contains the external dependencies needed to run the worker
*/
dependencies?: string[]
}
/**
* Run expensive function without blocking the UI, using a simple syntax that makes use of Promise.
*
* @see https://vueuse.org/useWebWorkerFn
* @param fn
* @param options
*/
export declare const useWebWorkerFn: <T extends (...fnArgs: any[]) => any>(
fn: T,
options?: UseWebWorkerOptions
) => {
workerFn: (...fnArgs: Parameters<T>) => Promise<ReturnType<T>>
workerStatus: Ref<WebWorkerStatus>
workerTerminate: (status?: WebWorkerStatus) => void
}
export type UseWebWorkerFnReturn = ReturnType<typeof useWebWorkerFn>
export type WebWorkerStatus =
| "PENDING"
| "SUCCESS"
| "RUNNING"
| "ERROR"
| "TIMEOUT_EXPIRED"
export interface UseWebWorkerOptions extends ConfigurableWindow {
/**
* Number of milliseconds before killing the worker
*
* @default undefined
*/
timeout?: number
/**
* An array that contains the external dependencies needed to run the worker
*/
dependencies?: string[]
}
/**
* Run expensive function without blocking the UI, using a simple syntax that makes use of Promise.
*
* @see https://vueuse.org/useWebWorkerFn
* @param fn
* @param options
*/
export declare const useWebWorkerFn: <T extends (...fnArgs: any[]) => any>(
fn: T,
options?: UseWebWorkerOptions
) => {
workerFn: (...fnArgs: Parameters<T>) => Promise<ReturnType<T>>
workerStatus: Ref<WebWorkerStatus>
workerTerminate: (status?: WebWorkerStatus) => void
}
export type UseWebWorkerFnReturn = ReturnType<typeof useWebWorkerFn>