vue 组合式函数封装

视频讲解

• 抖音
• 哔哩哔哩

核心代码

import {unref, watch} from "vue";

export const useEventListener = (...args) => {

    const target = typeof args[0] === 'string' ? window : args.shift()

    return watch(
        () => unref(target),
        (element, _, onCleanup) => {
            if (!element) return;
            element.addEventListener(...args)

            onCleanup(() => {
                element.removeEventListener(...args)
            })
        },
        {
            immediate: true
        }
    )
}

使用 Demo

<template>
    <div ref="containerRef" class="container"/>
</template>

<script lang="ts" setup>
import {useTemplateRef} from "vue";
import {useEventListener} from "@/components/useEventListener.ts";

const containerRef = useTemplateRef('containerRef')

const move = () => {
    console.count('move')
}

const off = useEventListener('mousemove', move)
setTimeout(() => {
    off()
}, 1000)
</script>

<style scoped>
.container {
    width: 200px;
    height: 200px;
    background: #181818;
}
</style>