当前位置：首页 > news >正文

React vs Vue：点击外部事件处理的对比与实现

news 2025/7/4 23:10:22

React vs Vue：点击外部事件处理的对比与实现

在 Web 应用中，“点击外部事件监听”是一种常见需求，典型应用如：点击弹窗外部关闭弹窗、点击下拉菜单外关闭菜单。虽然在 React 和 Vue 中实现的原理类似——都是通过监听 document 的点击事件并判断点击是否在目标元素外，但在两者框架中的编码方式和理念却有所不同。

📦 原理一致：判断是否点击在目标元素外

无论使用 Vue 还是 React，核心逻辑都是：

function isClickOutside(el: HTMLElement, target: EventTarget | null) {return el && target && !el.contains(target as Node)
}

这段逻辑判断点击的目标是否在 el 外部。

🔷 React 实现方式：使用 Hook

React 倾向于函数式和组合式思维，处理副作用的方式是通过 useEffect() 来注册和销毁事件。

import { useEffect, RefObject } from 'react'export function useClickOutside(ref: RefObject<HTMLElement>, handler: (e: MouseEvent) => void) {useEffect(() => {const listener = (e: MouseEvent) => {if (!ref.current || !isClickOutside(ref.current, e.target)) returnhandler(e)}document.addEventListener('mousedown', listener)return () => document.removeEventListener('mousedown', listener)}, [ref, handler])
}

使用方式：

const ref = useRef(null)
useClickOutside(ref, () => console.log('clicked outside'))

✅ 基于组件级 Hook
✅ 支持函数依赖管理
✅ 可按需组合并复用

🔶 Vue 实现方式：组合式 API + 自定义指令

Vue 提供两种实现路径：组合式 API（Composition API）和自定义指令（Directives）。

方法一：组合式 API

import { onMounted, onBeforeUnmount } from 'vue'export function useClickOutsideVue(elGetter: () => HTMLElement | null, handler: (e: MouseEvent) => void) {const listener = (e: MouseEvent) => {const el = elGetter()if (!el || !isClickOutside(el, e.target)) returnhandler(e)}onMounted(() => document.addEventListener('click', listener))onBeforeUnmount(() => document.removeEventListener('click', listener))
}

方法二：自定义指令

export const vClickOutside = {mounted(el: HTMLElement, binding: any) {el.__ClickOutside__ = (e: MouseEvent) => {if (isClickOutside(el, e.target)) {binding.value(e)}}document.addEventListener('click', el.__ClickOutside__)},unmounted(el: HTMLElement) {document.removeEventListener('click', el.__ClickOutside__)}
}

使用方式：

<template><div v-click-outside="onClose">弹窗</div>
</template>

✅ 更贴合模板语法
✅ 易于在 UI 层应用
✅ 可复用在多个 DOM 元素上

🔍 对比总结

对比项	React	Vue
使用方式	Hook（函数式组合）	Composition API / 指令
生命周期处理	`useEffect` 管理副作用	`onMounted` / `onBeforeUnmount`
可读性	适合开发者组织逻辑	更贴近模板，写法语义直观
复用性	Hook 可组合	指令可复用在多个模板元素上
构建风格	以 JS 逻辑为中心	以模板交互为中心