背景

在昨天的 Feday 活动中，我参加了一场主题为“一种 Vue2/Vue3 共存开发的思路”的演讲，演讲者分享了一些关于如何在项目中同时支持 Vue2 和 Vue3 的方法，以下是我对这些内容的理解和总结。

首先，面对 Vue2 即将终止支持的事实，我们需要对其进行升级以适应新的开发需求。演讲者建议尽量更新到 2.7 版本，因为此后如有更新也仅限于 2.7 版本，最优选择则是升级到 Vue3。

在实际开发中，我们需要面对一些同时支持的场景。例如，内部项目遗留可能导致项目需要在同一页面中呈现，这个问题可以通过微前端解决方案解决，但这与 Vue 的关系并不大。另外，对于内部组件资产的维护者，我们需要开发一个兼容 Vue2 和 Vue3 的组件库，确保其在两个版本的项目中能力一致。而对于老项目应用的开发者，当需要使用第三方组件时，可能会遇到仅支持 Vue3 版本的问题。

解决思路

针对这些场景，演讲者提出了一些思路。

针对整体的项目或者库

第一种是库和组件的项目组织。我们可以采用 monorepo 方式进行项目组织，通过软连接 src 和一些如 vueBridge 的工具实现版本间的互通。同时，利用 vue demi 和 component testing 实现组件的兼容性测试，由于 Vue2 和 Vue3 组件结构不同，我们需要将组件视为页面进行测试。

第二种思路是单仓库方式。在此方式下，我们可以通过 alias 实现 npm 包名的映射，以及构建工具配置来实现版本间的切换。

针对在 vue2 中引入 vue3 组件

在实际应用中，引入 Vue3 组件会面临一些挑战，如组件互操作限制、context 共享问题、作用域插槽无法互相传递以及事件原理不同等。

为了解决这些问题，演讲者提出了一种思路，即升级到 2.7 版本，然后通过 custom element 实现互操作层。同时，使用构建工具 vite 来简化开发过程。

在开发过程中，作者建议遵循一些约定。例如，目录结构采用 vue3/，文件名使用.ce.vue，并在项目配置中设置 vue.config.ignoreElements。

Custom element 与 Vue 组件存在一些不同之处，如复杂类型属性、slots 用法、不支持 scoped slot 和 provide inject、事件传递采用浏览器原生的 CustomEvents 以及样式处理等。

目前，这些共存开发的思路已经在实践中取得了一定的进展，如子组件样式处理、无需 shadow dom 的 custom elements 以及更好的 devtools 支持等。

总体而言，这场演讲为我们提供了一些关于 Vue2/Vue3 共存开发的实用建议，对于前端开发者来说，掌握这些技术将有助于提高开发效率和项目稳定性。