Vue v-on 在 React 中 VuReact 会如何实现？

VuReact 是一个能将 Vue 3 代码编译为标准、可维护 React 代码的工具。今天就带大家直击核心：Vue 中常见的 v-on/@ 指令经过 VuReact 编译后会变成什么样的 React 代码？

前置约定

为避免示例代码冗余导致理解偏差，先明确两个小约定：

文中 Vue / React 代码均为核心逻辑简写，省略完整组件包裹、无关配置等内容；
默认读者已熟悉 Vue 3 中的 v-on 指令用法。

编译对照

v-on / @：基础事件绑定

v-on（简写为 @）是 Vue 中用于绑定事件监听器的指令，用于响应用户交互。

Vue 代码：

html 复制代码

<button @click="increment">+1</button>

VuReact 编译后 React 代码：

jsx 复制代码

<button onClick={increment}>+1</button>

从示例可以看到：Vue 的 @click 指令被编译为 React 的 onClick 属性。VuReact 采用 事件属性编译策略 ，将模板指令转换为 React 的标准事件属性，完全保持 Vue 的事件绑定语义 ------当按钮被点击时，调用 increment 函数。

这种编译方式的关键特点在于：

语义一致性 ：完全模拟 Vue v-on 的行为，实现事件监听功能
命名转换 ：Vue 的 @click 转换为 React 的 onClick（camelCase 命名）
函数传递：直接传递函数引用，保持事件处理逻辑
React 原生支持：使用 React 标准的事件系统，无需额外适配

带事件修饰符：高级事件处理

Vue 的事件系统支持丰富的修饰符，用于控制事件行为。VuReact 通过运行时辅助函数处理这些修饰符。

Vue 代码：

html 复制代码

<button @click.stop.prevent="submit">Submit</button>

VuReact 编译后 React 代码：

jsx 复制代码

import { dir } from '@vureact/runtime-core';

<button onClick={dir.on('click.stop.prevent', submit)}>Submit</button>

从示例可以看到：带修饰符的 Vue 事件被编译为使用 dir.on() 辅助函数。VuReact 采用 修饰符运行时处理策略 ，将复杂的修饰符组合转换为运行时函数调用，完全保持 Vue 的事件修饰符语义。

编译策略详解：

jsx 复制代码

// Vue: @click.stop.prevent="handler"
// React: onClick={dir.on('click.stop.prevent', handler)}

// Vue: @keyup.enter="search"
// React: onKeyUp={dir.on('keyup.enter', search)}

// Vue: @click.capture="captureHandler"
// React: onClickCapture={dir.on('click.capture', captureHandler)}

运行时辅助函数 dir.on() 的工作原理：

解析修饰符：解析事件名称和修饰符字符串
创建包装函数：根据修饰符创建事件处理包装函数
应用修饰符逻辑：在包装函数中实现修饰符对应的行为
调用原始处理器：最终调用开发者提供的事件处理函数

内联事件处理与参数传递

Vue 支持在模板中直接编写内联事件处理逻辑，VuReact 也能正确处理。

Vue 代码：

html 复制代码

<button @click="count++">增加</button>
<button @click="sayHello('world')">打招呼</button>
<button @click="handleEvent($event, 'custom')">带事件对象</button>

VuReact 编译后 React 代码：

jsx 复制代码

<button onClick={() => count.value++}>增加</button>
<button onClick={() => sayHello('world')}>打招呼</button>
<button onClick={(event) => handleEvent(event, 'custom')}>带事件对象</button>

编译策略：

表达式转换：将 Vue 模板表达式转换为 JSX 箭头函数
事件对象处理 ：Vue 的 $event 转换为 React 的事件参数
参数传递：保持函数调用的参数顺序和值
响应式更新 ：自动处理 .value 访问（对于 ref/computed 等变量）

defineEmits 事件与组件通信

对于组件自定义事件，VuReact 也有相应的编译策略。

Vue 代码：

html 复制代码

<!-- 父组件 -->
<Child @custom-event="handleCustom" />

<!-- 子组件 Child.vue -->
<template>
  <button @click="emits('custom-event', data)">触发事件</button>
</template>

<script setup>
const emits = defineEmits(['custom-event']);
</script>

VuReact 编译后 React 代码：

jsx 复制代码

// 父组件使用
<Child onCustomEvent={handleCustom} />;

// 子组件 Child.jsx
function Child(props) {
  return <button onClick={() => props.onCustomEvent?.(data)}>触发事件</button>;
}

编译规则：

事件名转换 ：kebab-case 转换为 camelCase（custom-event → onCustomEvent）
emit 调用转换 ：$emit() 转换为 props 回调调用
可选链保护 ：添加 ?. 可选链操作符，避免未定义错误
类型安全：保持 TypeScript 类型定义的一致性

编译策略总结

VuReact 的事件编译策略展示了完整的事件系统转换能力：

基础事件映射：将 Vue 事件指令精确映射到 React 事件属性
修饰符支持：通过运行时辅助函数完整支持 Vue 事件修饰符
内联处理：正确处理模板中的内联事件表达式
自定义事件：支持组件间的自定义事件通信
类型安全：保持 TypeScript 类型定义的完整性

VuReact 的编译策略确保了从 Vue 到 React 的平滑迁移，开发者无需手动重写事件处理逻辑。编译后的代码既保持了 Vue 的语义和功能，又符合 React 的事件处理最佳实践，让迁移后的应用保持完整的交互能力。

🔗 相关资源

VuReact 官方文档：语义编译对照总览
VuReact Runtime：指令辅助工具

✨ 如果你觉得本文对你理解 VuReact 有帮助，欢迎点赞、收藏、关注！