目前可以在一个项目里同时跑起 Vue3 和 React 组件，彼此还能拿到对方的 Context、复用钩子，DOM 不会被多余的 div 包裹，开发者能像用本框架组件那样去调用对方的组件。看到这个效果时，我停下来把源码和文档都翻了遍，感觉像把两套生态强行接合在一起，但又真能跑通。
先说结论性的东西：这个库叫 Veaury，读作 /ˈvjuːri/（类似 “view-ri”），作者取名时也暗含了“beauty”的谐音。它的方向是把 Vue3 和 React 当成能相互理解的对方，通过一套转换层把组件、Hooks、Context 等东西翻译过去。官方页面里列出的重点能力可以概括成四点：只面向 Vue3；能让 React 的 Context 与 Vue 的 provide/inject 互通；让 React 的钩子在 Vue 的 setup 里可用，反过来也可以把 Vue 的响应式 API 在 React 函数组件里用起来；转换后不会多包一层 DOM 元素，保持输出的干净。看到这些声明，你能想象它不是简单把代码包一层壳，而是做了比较深入的对接。
关于怎么用，文档里给出的体验是：用 Vite 最直接，按照示例模板开个项目，谁是主技术栈就把谁作为宿主；如果你的项目用的是 Webpack、Vue-CLI 或 CRA，也有对应的插件和 Babel 预设，官方仓库提供了可复制的模板，拿来改一改就能跑起来。这部分我自己试了一下，Vite 的步骤的确 最短，改动也少。实现思路上，转换后的组件被当作客户端组件去挂载，路由和数据获取依旧各自归属各自框架，不会把整个 SSR 流程推翻。
具体到互通细节，有几处挺关键：Context 的互通实现了相互读取的通道——从 Vue 侧直接用 inject('xxx') 就能拿到在 React 侧 createContext 提供的值，反过来 React 也能 useContext 拿到 Vue provide 的内容。Veaury 提供了一个“跨框架 Provider”函数，名字是 createReactMissVue，把这个包装器套在 React 根节点上，Vue 那边就能像本地注入一样拿到数据。钩子层面的互通意味着，你可以在 Vue 的 setup 里调用类似 useState、useEffect 的逻辑，或者把 Vue 的响应式 ref、computed 带到 React 的函数组件里使用。TypeScript 支持和 SSR 场景也都有覆盖，官方的示例里演示了把转换组件作为客户端部分使用，服务端渲染流程基本不被破坏，这点对大型项目尝试迁移验证比较重大。
有两类常见用法我总结一下：一是把现有的 React 组件直接插到 Vue 页面里，用作某些交互密集或已有成熟实现的功能块；二是反过来，把 Vue 组件在 React 应用里复用，尤其是公司内部既有两套组件库时，想低成本试水迁移方案会常用到这套方式。仓库里给了两个完整的 demo，思路大同小异：转换后的组件当作客户端组件，用各自的路由和数据获取方式，不强行统一状态管理，尽量减少对现有架构的侵入。
实现原理上，Veaury 更像是一个“翻译器”。它把一个框架的组件运行上下文、生命周期钩子、响应式数据模型映射成另一个框架能理解的形式。为了不污染 DOM，采取了所谓的“纯净模式”，转换后不会额外包一层 div，组件输出保持原有的 DOM 结构。这一点对样式和第三方库兼容性很重大，避免了常见的嵌套带来的样式错位问题。不过，任何跨框架桥接都逃不过性能和语义复杂度的代价，实际项目里要注意检查性能开销和内存使用。
回头看看为什么会有人做出这样的库，这和前端框架生态的现状有关。过去几年，Vue 和 React 各有千秋，社区长期处于你追我赶的局面——一句话就是双雄并立。许多团队不是彻底迁移，而是逐步演进，或因历史缘由同时维护两套代码。Veaury 的出现正好应对这种现实：在不做大改造的前提下，让两边能互用组件，降低重复开发成本，也能在内部做灰度迁移。这也是为什么它会强调能在不破坏 SSR 的前提下工作：大型应用往往依赖服务端渲染，不能轻易换架构。
安装和上手并不复杂。官方仓库里有可复用的模板，配置说明也比较详尽。我的试验流程是：先在一个干净的 Vite 项目里把 veaury 的依赖装上，按示例配置 vite 插件，然后把目标的 React 组件用提供的转换工具包成可直接在 Vue 里使用的组件。调试时要注意导出默认还是命名导出，以及 props 的类型映射。TypeScript 用户还得额外检查类型声明，尽量把类型适配做好，避免在转换层出现 any 泛滥。文档地址也在仓库里，想深入可以看官方的中文 README。
从使用场景的角度看，适合做内部验证、做 demo、在小范围内试试混合开发的团队。把它当成长期生产依赖需要谨慎：接口契约、性能压力、边缘生命周期差异、第三方库兼容性，这些都需要完整的压测和预案。用在生产前提议做充分的验收测试，并准备自研或替代方案，以防某些关键路径由于跨框架层出现难以排查的问题。简单试用很好玩，但团队决策层要把风险放在清单里。
实际工作中的一个小体会：把两个框架“缝”一起，调试时的可视化感受很特别。控制台会同时输出来自两个运行时的警告信息，需要分清是 Vue 的响应式问题还是 React 的钩子警告。另一个细节是样式作用域问题，尽可能把样式放在组件本身处理，避免全局样式污染相互影响。总体来说，它把原本需要重写或封装的工作量给压缩了，但也带来新的排查成本，这种代价要在项目背景下权衡。
如果你想直接去看源码或示例，官方仓库地址里有较完整的介绍和中文文档，里面也列出了常见问题和 demo。别忘了在把它引进团队前做一波压力测试和类型校验，生产环境要稳妥。感觉上，Veaury 给了我们一个新的思路：不是非要在 Vue 和 React 之间选边站队，而是可以先让它们在同一屋檐下各自发挥，等条件成熟再思考更彻底的技术路线迁移。
暂无评论内容