VTJ.PRO v2.5.0 重磅发布:Composition API 全面升级,实现 parser→coder→renderer 精确双向闭环
基于对三个核心包源码的深入分析,以下是对 @vtj/coder、@vtj/parser、@vtj/renderer composition 模式升级版本的全面评价:
总体评价:一次架构设计扎实、双向闭环完整的 API 范式迁移
此次升级将 VTJ 从 Options API 单模式扩展为 Options/Composition 双模式共存,三个核心包形成了 "parser 解析 → DSL 存储 → coder 出码" 的精确双向镜像闭环。以下是分维度评价:
1. 架构设计 — ⭐⭐⭐⭐⭐
符号表驱动 (SymbolTable) 是本次升级最核心的设计亮点。
@vtj/coder 中 symbolTable.ts 将 DSL 中所有 this.xxx 引用分类为:refs(需 .value 解包)、reactives(直接访问)、computed、methods、state、composables、globalApi、dataSources 八大类别。这一定义直接驱动了:
- transformer.ts 的上下文感知转换(
script上下文解包.value,template不解包) - parser 端 mirror 的反向分类
- 全局 API 的自动检测与声明生成
跨包映射共享:coder 导出 GLOBAL_API_MAP 供 parser 复用,从根本上避免了硬编码不一致问题。parser 的 reverseGlobalApi.ts 按最后一个 . 分割,正确处理了多级路径(如 __instance.proxy.$xxx)。
2. 双向转换精度 — ⭐⭐⭐⭐⭐
parser ↔ coder 的 DSL 双向转换形成了精确镜像:
| 方向 | 模块 | 关键能力 |
|---|---|---|
| Vue → DSL | @vtj/parser | scriptSetup AST 解析 + reverseTransformer 反向注入 this. |
| DSL → Vue | @vtj/coder | transformer 剥离 this. + 生成 <script setup> |
经过多轮迭代修复了:
reverseGlobalApi中$forceUpdate.$refs双重替换错误(修复记录)- 内部变量(
__instance、getCurrentInstance())误入 DSL setup 字段 - composables 解构字段与全局 API 声明的去重
测试覆盖充分:parser composition.test.ts (545行) + compositionPatch.test.ts (271行),coder 有 3 个 composition 专项测试文件。
3. 渲染器集成 — ⭐⭐⭐⭐
block.ts 中通过 apiMode === 'composition' 的单点分流实现零侵入集成:
Composition 模式执行顺序:
refs → reactives → computed → methods → injects → dataSources
→ composables → context.setup → watches
→ lifeCycles注册 → setup字段执行 → provide几个值得关注的设计细节:
- 响应式覆盖防护:context.setup 中保存/恢复 state/refs/reactives 防止被 attrs 覆盖
- composable 查找限定:仅从
$libs中查找,避免污染 Vue 内置 API - Options→Composition 生命周期自动映射:
mounted → onMounted等,同时created/beforeCreate等价于 setup 立即执行
4. BlockSchema 数据模型 — ⭐⭐⭐⭐⭐
BlockSchema 的设计遵循了"双模式共存、字段语义清晰"的原则:
| 字段 | Options | Composition | 说明 |
|---|---|---|---|
state | ✅ 核心 | ✅ reactive | 双模式共享 |
refs | ❌ | ✅ | Composition 专属 |
reactives | ❌ | ✅ | Composition 专属 |
composables | ❌ | ✅ | Composition 专属 |
setup | ❌ | ✅ | 命令式初始化 |
computed/methods/watch/lifeCycles | ✅ | ✅ | 双模式共享 |
BlockModel 提供了 11+ 个管理方法(setRef/removeRef/setReactive/removeReactive/setComposable/removeComposable/setProvide/removeProvide/setSetup/setApiMode),设计器可以透明地操作 Composition 字段。
5. 多框架全局 API 兼容 — ⭐⭐⭐⭐⭐
globalApi.ts 实现了业界少见的运行时 UI 库自动探测 + 多框架全局 API 映射:
- Vue 生态:vue-router (
$router/$route)、vue-i18n ($t/$tm)、pinia ($pinia) - @vtj/renderer:
$provider/$store/$request/$libs/$access/$apis - Element Plus:
$message/$notification/$loading等 8 个 API - Ant Design Vue:
$message/$notification/$modal等 3 个 API __renderer__特殊标记自动与useProvider合并为单条 import
memberAccess 形式支持:__i18n.te(成员访问)与 this.$t(函数调用)均正确映射,并通过 simple 和标准映射的双条目定义覆盖。
6. 提示词工程体系 — ⭐⭐⭐⭐⭐
VTJ 的 prompt 体系提供了一个高参考价值的模板——它不是孤立的 prompt 集合,而是与 DSL 编译器(coder)和解析器(parser)形成了强耦合约束。这种"提示词即协议"的设计思路,比传统的"告诉 AI 该怎么写"的 prompt 工程思路要更系统化、更可验证。
总评
这是一次架构前瞻性很强的升级。SymbolTable + transformer 的双向镜像架构设计简洁且可扩展,BlockSchema 的双模式字段设计不破坏 Options 模式兼容性,全局 API 映射体系覆盖了主流 Vue 生态库。在低代码/DSL 领域做到 parser ↔ coder ↔ renderer 三端精确对齐 Composition API 语义的,这在工程实践上是比较罕见的。
核心优势:双向精确性、架构可扩展性、零侵入的 Options 兼容。
更新指引
开源版本
开源版本可通过重新安装项目依赖即可更新到最新版本,命令:
npm run clean && npm install私有化部署版
私有化部署版本按以下步骤更新:
- 下载最新版本源码,下载地址:https://app.vtj.pro/#/workbench/service
- 重新安装项目依赖bash
npm run clean && pnpm install - 后台更新配置AI提示词, 新版提示文件:
/_docs/prompts/coder.md - 新增配套
skills, 技能文档目录:/_docs/skills/。 可通过npm run seed写入种子数据的方式增加,或手动在后台添加。必须的技能:apiblockchartenvglobalsi18niconspagesettingsuniutils
欢迎广大开发者体验新版,共同推动 AI 低代码引擎的持续进化!🚀