Vue3 和 React 在同一个工程里互用组件、共享 Context、相互调用钩子，这东西的确 跑得起来。叫 Veaury，一个把两个生态“缝”在一起的开源小库，实际效果比我想象中还完整一点。
我翻到它的时候是随手刷文档，名字念作 view-ri，作者说是跟 “beauty” 谐音。官方写着一句挺直接的话：把 React 放进 Vue3，也把 Vue3 放进 React，尽量做到无缝。别人吹的有点多，但代码能跑就行。官方给自己标了四颗星，功能说明也挺清楚：只支持 Vue3，Vue2 的用户要去另一个仓库（vuereact-combined）；支持跨框架的 Context；Hooks 能互通；有纯净模式，转换后不会自动多包一层 div，DOM 比较干净。
我先把怎么用梳理一遍，按我理解来讲，分几块说清楚。要注意，这是学习和试验工具，别冲进生产环境就当万金油。
先说最吸引人的点：组件、Hooks、Context 三件事儿都可以跨过去。具体表现是，React 的 Context 可以被 Vue 的 provide/inject 机制读到，反过来 Vue 的 provide 也能被 React 拿到。Hooks 互通那一项更有意思：React 的钩子能够在 Vue 的 setup 里被调用，而 Vue 的响应式 API（列如 ref、reactive、computed）也能在 React 的函数组件里使用。换句话说，两个框架在运行时能把自己的 API 和状态机制“翻译”给对方看。
实现上，Veaury 有几个关键点。它不走那种笨重的 DOM 包裹套路，有纯净模式选项，转换后的组件不会额外挂个 div 或别的包层，DOM 结构比较接近原生写法。对于项目构建，Vite 是最简单的选择，按官方模版搭一套很快能跑起来。用 Webpack、Vue-CLI、CRA 的项目也能用，仓库里给了插件和 babel 预设，按模板复制就行，不用从零改许多配置。
具体用法上分两类场景：在 Vue 组件里用 React 组件，和在 React 组件里用 Vue 组件。实际操作并不复杂，按作者给的 demo 思路走就行。Veaury 还提供了一个跨框架 Provider：createReactMissVue。把它套在 React 根节点外层，就能把 React 的 Context 注入到 Vue 的 provide/inject 里，反向也成立。仓库里有两个完整的示例工程，演示了这些互通的场景，值得跑一遍看看细节。
把转换后的组件当成客户端组件来用是常见做法。也就是路由、数据获取这些逻辑各自负责，各自沿用原有的 SSR 流程，不去强行把两套 SSR 混在一起。这样的好处是迁移或验证时冲突少，坏处是整体复杂度会上来，调试和性能评估得花时间。官方文档里也把这些注意点写了，想深入就看 README_zhcn 那页：
https://github.com/gloriasoft/veaury/blob/master/README_zhcn.md
说到实际场景：公司要做渐进式迁移，想把一块业务从 React 迁到 Vue，或者反过来，Veaury 可以当试验田。可以先用它把组件层打通，做一些小范围的 demo，用低成本去验证交互和样式能否平滑衔接。还有人会用它在内部分享会演示“如果把两个框架放一起会怎样”，学习价值挺高。亲测它对 TypeScript 的支持和对 SSR 的覆盖面做得还不错，文档里也把这些点列进去了。
不过别以为这就能直接替代重写或长期维护方案。实际落地有两类工作要做：一是性能和稳定性压测，确保在目标负载下行为可控；二是做好自研备份方案，列如关键模块还是要有纯粹的实现以防第三方库出问题。换句话说，把 Veaury 当成工具箱里的一个工具，不是放弃架构选择的理由。好了，这里有些我觉得能引起注意的细节和坑：
– 兼容性：只支持 Vue3，像许多老项目还在 Vue2 的就直接不合适，仓库给了替代，但另一个项目名不太一样，需要额外评估。
– 构建与打包：Vite 最方便，其他构建链要按仓库模板改配置。不要以为复制粘贴就万事大吉，实际项目里路由和状态提供层得理顺。
– DOM 结构：纯净模式能避免额外包层，但也要注意样式穿透和事件委托的差异。
– 调试成本：当问题出目前跨框架边界时，定位会比单一框架复杂，团队得提前约定调试流程。
我跑过仓库里的两个 demo，实操体验挺直观：React 组件在 Vue 页面里像普通子组件一样被渲染，事件回调能往上传；Vue 组件在 React 页面里同样工作正常，响应式数据在 React 里也能被消费。Context 那块最让我眼前一亮，直接拿 React Context 在 Vue 里 inject 一下，拿到的是同一个值，没有必要做额外的数据同步代码。钩子互通那段有点魔法感，写法上要按 Veaury 的约定来，偷懒容易踩坑，但按例子走能少出错。
仓库里资料还挺全，包含各类示例、使用说明和注意事项，原文档里也有中文版说明，方便直接上手。地址我之前贴过，这里再放一次方便查阅：
https://github.com/gloriasoft/veaury/blob/master/README_zhcn.md
讲到这儿，我个人的感觉是：把两个生态放一起玩的确 有意思，也能解决一些迁移场景的燃眉之急，但要当长期方案还需要更多验证。想试试的可以先把 demo 拉下来跑一圈，边学边测。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
