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

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

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

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

ts 复制代码

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

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

🔷 React 实现方式：使用 Hook

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

tsx 复制代码

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)) return
      handler(e)
    }
    document.addEventListener('mousedown', listener)
    return () => document.removeEventListener('mousedown', listener)
  }, [ref, handler])
}

使用方式：

tsx 复制代码

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

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

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

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

方法一：组合式 API

ts 复制代码

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)) return
    handler(e)
  }
  onMounted(() => document.addEventListener('click', listener))
  onBeforeUnmount(() => document.removeEventListener('click', listener))
}

方法二：自定义指令

ts 复制代码

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__)
  }
}

使用方式：

vue 复制代码

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

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

🔍 对比总结

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

✅ 最佳实践建议

项目类型	推荐实现方式
React 应用	`useClickOutside` hook
Vue3 + 组合式项目	`useClickOutsideVue` hook
Vue2 / 模板为主项目	`v-click-outside` 指令

通过合理封装点击外部事件监听逻辑，可以在保持代码整洁的同时，提升组件交互体验与可维护性。