createDisposableDirective

类别

Utilities

导出体积

上次更改

2 weeks ago

用于编写可销毁指令的工具。在 mounted 指令钩子中创建的响应式副作用会被追踪，并在指令卸载时自动销毁。

用法

创建一个使用 createDisposableDirective 的指令

import { useMouse } from '@vueuse/core'
import { createDisposableDirective } from '@vueuse/shared'

export const VDirective = createDisposableDirective({
  mounted(el, binding) {
    const value = binding.value
    if (typeof value === 'function') {
      // [`useMouse`](/core/useMouse/) 事件监听器会在指令卸载时自动移除
      const { x, y } = useMouse()
      watch(x, val => value(val))
    }
  }
})

类型声明

type originDirective<H, V, A> =
  | FunctionDirective<H, V, string, A>
  | ObjectDirective<H, V, string, A>
/**
 * Utility for authoring disposable directives. Reactive effects created within `mounted` directive hook will be tracked and automatically disposed when directive is unmounted.
 *
 * @see https://vueuse.org/createDisposableDirective
 *
 * @__NO_SIDE_EFFECTS__
 */
export declare function createDisposableDirective<
  H extends HTMLElement,
  V,
  A = any,
>(origin?: originDirective<H, V, A>): originDirective<H, V, A>

源码

源码 • 文档

贡献者

一纸忘忧

Jialong Lu

更新日志

Pending for release...

52d68 - fix(directive): create disposable directive func cleanup of side effects unmounted (#5244)