createDisposableDirective

Category

Utilities

Export Size

Last Changed

yesterday

Utility for authoring disposable directives. Reactive effects created within mounted directive hook will be tracked and automatically disposed when directive is unmounted.

Usage

Creating a directive that uses 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/) event listener will be removed automatically when directive is unmounted
      const { x, y } = useMouse()
      watch(x, val => value(val))
    }
  }
})

Type Declarations

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>

Source

Source • Docs

Contributors

Jialong Lu

Changelog

Pending for release...

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