Vuact
Vuact 是一个 React 运行时兼容层,用于 Vue 3。它使得在 Vue 3 项目中无缝使用 React 组件生态系统成为可能,实现了 Vue 和 React 之间的双向互操作性,包括组件、事件、响应性、Context、Ref 等。
关键价值:
无缝使用 React 组件在 Vue 应用中
支持双向迁移:Vue ↔ React
在同一个应用中使用 Vue 和 React
以 React 的方式构建跨栈组件库
快速开始
有关完整的配置和初始化流程,请参阅 setup-config.md。
核心能力
Vuact 提供两个核心函数来转换 Vue 和 React 之间的组件:
r2v(react-to-vue):将 React 组件转换为 Vue 组件
v2r(vue-to-react):将 Vue 组件转换为 React 组件
示例:r2v 基础、v2r 基础
Vuact 提供了一个灵活的插槽和渲染属性转换机制:
在 Vue 端,可以通过插槽将子组件、元素属性或渲染属性传递给 React 组件
在 React 端,可以通过属性将插槽传递给 Vue 组件
示例:r2v 渲染属性和插槽、v2r 插槽
Vuact 自动转换 Vue 和 React 之间的属性和事件:
Vue 类 → React className
Vue 样式(字符串或对象)→ React 样式(对象)
React className → Vue 类
React 样式(对象;自动添加 px 单位)→ Vue 样式
Vue v-model 更新事件 → React onUpdate:xxx
示例:r2v 事件回调、v2r 事件回调
Vuact 支持 Vue 和 React 之间的双向 Context 传递:
在 Vue 端,可以通过 provideContext 将 React Context 传递给 React 组件
在 React 端,可以通过 VueContextProvider 将 Vue Context 传递给 Vue 组件
Context 可以通过两个框架传递
示例:r2v React Context、r2v Vue Context、v2r React Context、v2r Vue Context
Vuact 支持 Vue 和 React 组件之间的 Ref 传递:
在 Vue 端,使用 ref 获取 React 组件实例
在 React 端,使用 ref 获取 Vue 组件实例
对于函数组件,通过 useImperativeHandle 暴露方法
示例:r2v 组件 Ref、v2r 组件 Ref
Vuact 允许在 React 组件中直接使用 Vue 响应性:
通过 useVueEffectScope 创建一个 Vue 响应性作用域
在该作用域内使用 Vue Hooks,如 ref、watch、computed 等
结合两个框架的响应性系统
示例:r2v Vue Hooks、r2v 混合组件
兼容性和限制
版本兼容性
React:主要兼容 React 16-18;React 19 支持正在进行中
Vue:需要 Vue >= 3.5
构建工具:仅支持 ESM;需要现代化的打包工具
已知限制
由于 Vuact 基本上是基于 Vue 的,一些行为无法完全匹配 React:
并发渲染:Vue 渲染递归,因此无法复制 React 的并发渲染
提交阶段:Vue 在递归渲染期间修改 DOM,因此没有像 React 的显式提交阶段
useInsertionEffect 定时与 React 不同
getSnapshotBeforeUpdate 定时与 React 不同
事件系统:@vue/runtime-dom 不能完全匹配 react-dom
react-dom 的 SyntheticEvent 与标准 Web 事件不同
react-dom 对一些原生 DOM 元素(如 input、form 等)应用特殊处理
完整示例
加载相关参考文档以获取完整的示例代码和详细说明。
Vue → React(r2v)
r2v 基础 - 使用 React 组件的最基本方式
r2v 事件回调 - 事件在 Vue 和 React 组件之间传递
r2v 混合组件 - 混合使用 Vue 和 React,使用两个框架的能力
r2v React Context - 将 React Context 传递给 React 组件
r2v 组件 Ref - 获取 React 组件的 Ref
r2v 渲染属性和插槽 - 渲染属性和元素属性的使用
r2v Vue Context - 将 Vue Context 传递给 React 组件
r2v Vue Hooks - 在 React 组件中使用 Vue Hooks
React → Vue(v2r)
v2r 基础 - 使用 Vue 组件的最基本方式
v2r 事件回调 - 事件在 React 和 Vue 组件之间传递
v2r React Context - 将 React Context 传递给 Vue 组件
v2r 组件 Ref - 获取 Vue 组件的 Ref
v2r 插槽 - 将插槽传递给 Vue 组件
v2r Vue Context - 将 Vue Context 传递给 Vue 组件
配置和初始化
setup-config.md - 完整的配置和初始化指南(比 README 更完整)