LigaAI 团队博客
·
技术分享 | 如何编写同时兼容 Vue2 和 Vue3 的代码?
💡
原文中文，约6900字，阅读约需17分钟。
📝
内容提要
本文介绍Vue2和Vue3中实现代码兼容的方法和优化代码的技巧，包括利用编译和运行阶段实现兼容，转换createElement函数参数，使用代数数据类型精简代码等。同时提供评论编辑器案例展示优化代码的实际应用。
🎯
关键要点
- LigaAI 的评论编辑器支持在 Vue2 和 Vue3 中使用，便于代码共享和升级。
- 兼容 Vue2 和 Vue3 的代码实现分为编译阶段和运行阶段。
- 编译阶段通过 Vue-Demi 自动选择 API，支持 IIFE 和打包工具。
- 运行阶段通过转换 createElement 函数的参数，使 Vue2 和 Vue3 的参数格式一致。
- Vue2 的 createElement 函数需要将 attrs 和 scopedSlots 写在特定属性中，而 Vue3 则简化为直接写在外层。
- 使用代数数据类型可以精简代码，减少状态数量，降低代码复杂度。
- 状态是可以由系统内部行为更改的数据，状态数量越少，代码逻辑越简单。
- 通过案例展示了如何优化评论编辑器的显示控制，减少状态数量，提高代码可维护性。
- 优化后的做法使用一个字符串变量表示当前活动的评论组件，简化了逻辑判断。
➡️
