diff --git a/packages/core/useEventListener/index.ts b/packages/core/useEventListener/index.ts index d81ea28dbd4..b2ee006e1c4 100644 --- a/packages/core/useEventListener/index.ts +++ b/packages/core/useEventListener/index.ts @@ -1,4 +1,4 @@ -import type { Fn, MaybeArray, MaybeComputedRef } from '@vueuse/shared' +import type { Arrayable, Fn, MaybeComputedRef } from '@vueuse/shared' import { isString, noop, tryOnScopeDispose } from '@vueuse/shared' import { watch } from 'vue-demi' import type { MaybeElementRef } from '../unrefElement' @@ -28,8 +28,8 @@ export interface GeneralEventListener { * @param options */ export function useEventListener( - event: MaybeArray, - listener: MaybeArray<(this: Window, ev: WindowEventMap[E]) => any>, + event: Arrayable, + listener: Arrayable<(this: Window, ev: WindowEventMap[E]) => any>, options?: boolean | AddEventListenerOptions ): Fn @@ -46,8 +46,8 @@ export function useEventListener( */ export function useEventListener( target: Window, - event: MaybeArray, - listener: MaybeArray<(this: Window, ev: WindowEventMap[E]) => any>, + event: Arrayable, + listener: Arrayable<(this: Window, ev: WindowEventMap[E]) => any>, options?: boolean | AddEventListenerOptions ): Fn @@ -64,8 +64,8 @@ export function useEventListener( */ export function useEventListener( target: Document, - event: MaybeArray, - listener: MaybeArray<(this: Document, ev: DocumentEventMap[E]) => any>, + event: Arrayable, + listener: Arrayable<(this: Document, ev: DocumentEventMap[E]) => any>, options?: boolean | AddEventListenerOptions ): Fn @@ -82,8 +82,8 @@ export function useEventListener( */ export function useEventListener( target: InferEventTarget, - event: MaybeArray, - listener: MaybeArray>, + event: Arrayable, + listener: Arrayable>, options?: boolean | AddEventListenerOptions ): Fn @@ -100,15 +100,15 @@ export function useEventListener( */ export function useEventListener( target: MaybeComputedRef, - event: MaybeArray, - listener: MaybeArray>, + event: Arrayable, + listener: Arrayable>, options?: boolean | AddEventListenerOptions ): Fn export function useEventListener(...args: any[]) { let target: MaybeComputedRef | undefined - let events: MaybeArray - let listeners: MaybeArray + let events: Arrayable + let listeners: Arrayable let options: any if (isString(args[0]) || Array.isArray(args[0])) { @@ -127,7 +127,11 @@ export function useEventListener(...args: any[]) { if (!Array.isArray(listeners)) listeners = [listeners] - let cleanup = noop + const cleanups: Function[] = [] + const cleanup = () => { + cleanups.forEach(fn => fn()) + cleanups.length = 0 + } const register = (el: any, event: string, listener: any) => { el.addEventListener(event, listener, options) @@ -141,14 +145,11 @@ export function useEventListener(...args: any[]) { if (!el) return - const cleanups = (events as string[]).map((event) => { - return (listeners as []).map(listener => register(el, event, listener)) - }).flat() - - cleanup = () => { - cleanups.forEach(unregister => unregister()) - cleanup = noop - } + cleanups.push( + ...(events as string[]).flatMap((event) => { + return (listeners as Function[]).map(listener => register(el, event, listener)) + }), + ) }, { immediate: true, flush: 'post' }, ) diff --git a/packages/shared/utils/types.ts b/packages/shared/utils/types.ts index f5592d3c03d..d78691d6392 100644 --- a/packages/shared/utils/types.ts +++ b/packages/shared/utils/types.ts @@ -60,7 +60,7 @@ export type DeepMaybeRef = T extends Ref ? { [K in keyof T]: DeepMaybeRef } : MaybeRef -export type MaybeArray = T[] | T +export type Arrayable = T[] | T /** * Infers the element type of an array