useWebWorkerFn

分类

浏览器

导出大小

888 B

上次更改

4 个月前

演示

源代码演练场 (beta)

当前时间：2025-10-23 06:49:11 812

这是一个演示，展示了使用或不使用 WebWorker 对大型数组（5 百万个数字）进行排序。
当 UI 阻塞发生时，时钟停止。

用法

基本示例

import { useWebWorkerFn
 } from '@vueuse/core'

const { workerFn
 } = useWebWorkerFn
(() => {
  // some heavy works to do in 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
    ],
  },
)

带有本地依赖项

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 文档。

致谢

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

类型声明

显示类型声明

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[]
  /**
   * An array that contains the local dependencies needed to run the worker
   */
  localDependencies
?: Function[]
}
/**
 * Run expensive function without blocking the UI, using a simple syntax that makes use of Promise.
 *
 * @see https://vueuse.org.cn/useWebWorkerFn
 * @param fn
 * @param options
 */
export declare function useWebWorkerFn
<T
 extends (...fnArgs
: any[]) => any>(
  fn
: T
,
  options
?: UseWebWorkerOptions,
): {
  workerFn
: (...fnArgs
: Parameters
<T
>) => Promise
<ReturnType
<T
>>
  workerStatus
: ShallowRef
<WebWorkerStatus
, WebWorkerStatus
>
  workerTerminate
: (status
?: WebWorkerStatus
) => void
}
export type UseWebWorkerFnReturn
 = ReturnType
<typeof useWebWorkerFn
>