vue2 vue3 composition api

背景

tdesign 中 vue3 与 vue2 现状：

vue3 仓库建立之初组件大部分从 vue2 搬运过来，在 vue 技术栈中，tdesign 大部分使用 optionsAPI，后续整体方向会往 compositionAPI 重构。

SFC 文件同步

由于 TDesign API 的一致性，且 vue2 与 vue3 之间在 template 中的差异较小。 SFC 文件转换利用 vue-template-compiler 将 SFC 文件拆分为 后的template, style 进行同步。 在文件同步后再利用 lint 工具对代码进行 format。当前应用场景在官网文档的 vue2/3 之间的转换。js 部分针对用户群体分别用 compositionAPI 和 optionsAPI 实现。

vue2 与 vue3 代码融合

compositionAPI的重构

相关进展, Composition Api 重构计划, compositionAPI 分支更新内容。

新组件与组件重构使用 compositionAPI, 需要从 vue3 往 vue2 做转换。

组件维护

老组件 bug 修复与新增特性依然使用 optionsAPI, 需要从 vue2 往 vue3 做转换。

代码转换

转换思路

img form gogocode

1. 源代码解析成抽象语法树（AST）
2. jsx component 中 vue2 与 vue3 实现的差异，映射表，相互映射
3. 遍历树中的需要改动点
4. 映射源代码
5. 输出字符串形式的代码

代码转换过程需要用到 ast, 调研相关的工具包与方案:

差异列表

• template部分

vue2	vue3	描述
<div slot="name">xxx</div>	<template #name><div>xxx</div></template>	插槽
:props.sync	v-model:props	双向绑定语法糖

• style 部分

vue2	vue3	描述
.a :deep(.b)	/deep/	深度选择器

• optionsAPI部分

vue2	vue3	描述
$scopeSlots	$slots	插槽对象
$attrs不包含class&style	$attrs包含class&style	文档
$listeners	移除	文档
$children	移除	文档
.native 修饰符	移除	文档
propsData	移除	文档
$on、$off 和 $once	移除	文档
Vue.extend	移除，defineComponent 替代	文档

• compositionAPI部分

vue2 使用 @vue/compositionapi 包。

gogocode

import $ from 'gogocode'

const ast = $(source);

// 寻找代码
const test1 = ast.find('xxx');

// 生成代码
test1.generate()

gogocode 提供了 vue2 转 vue3 的方案，主要是针对官网迁移指南之间的转换，与本项目实际应用场景差异较大。

更多实践，待更新......