VTJ.PRO v2.5.0 正式发布:Composition 双向转换闭环

131 阅读3分钟

我们很高兴宣布,VTJ.PRO v2.5.0 正式发布!本次升级的核心是让 Composition API 成为一等公民,同时保持对 Options API 的完全兼容。借助全新的符号表驱动架构,@vtj/coder、@vtj/parser、@vtj/renderer 三大核心包构建了 “解析 → 存储 → 生成” 的精确双向闭环,让低代码和手写代码之间的转换变得前所未有的顺畅。

一句话概括:你现在可以自由地在可视化设计器和 Vue 源代码之间来回切换,而不用担心代码被“锁死”或语义丢失——Composition API 也不例外。


🎯 这次升级到底解决了什么问题?

很多低代码平台要么只能“拖拽生成代码”却无法逆向,要么生成代码不规范、难以维护。VTJ.PRO 从诞生起就坚持 “设计即代码,代码即设计”,v2.5.0 将这一理念推向了新高度:

  • 双向转换:从 Vue 源码 → 低代码 DSL(可编辑),从 DSL → 标准 Vue 3 + TS 代码。这次连 Composition API 的 <script setup> 语法也完美支持。
  • 不锁定:生成的代码没有私有运行时,你可以随时导出并在 IDE 中继续手写。
  • AI 辅助:自然语言生成页面、设计稿转代码、自动修复报错,这些能力依然在线,而且因为底层解析更精准,AI 生成的质量也更高。

🧩 核心升级亮点:三大引擎齐发力

1️⃣ @vtj/parser:看懂你的 Composition API

过去解析器主要针对 Options API,现在它能深度理解 <script setup> 的 AST(抽象语法树),识别 refreactivecomputedwatch 等所有组合式 API 写法,并反向注入 this. 形式,让设计器可以统一操作。

2️⃣ @vtj/coder:生成干净、标准的代码

它把设计器里的 DSL 重新转换为 Composition API 代码,自动处理 .value 的解包和上下文差异(模板里不用 .value,脚本里要用),生成的代码完全符合 Vue 3 官方最佳实践。

3️⃣ @vtj/renderer:运行时零侵入兼容

渲染器通过一个开关(apiMode: 'composition')无缝切换执行逻辑,无需改动任何现有组件。Options 和 Composition 两种模式可以在同一个项目中混用,迁移成本几乎为零。


🧠 技术小解密:为什么能做到如此精准?

关键在于我们设计了一个 符号表(SymbolTable)。它像一张“身份地图”,将 DSL 中的 this.xxx 分成 8 类(refs、reactives、computed、methods……)。这样,在生成代码时,引擎就知道:

  • <script> 里对 refs 要加 .value
  • <template> 里不加
  • 哪些是全局 API(如 $router)需要自动导入

这种“上下文感知”能力,让转换结果不仅语法正确,而且语义完全等价——不是机械的字符串替换,而是真正的代码重构。


👨‍💻 对开发者有什么实际好处?

  • 更自由的开发模式:你可以先用可视化工具快速搭出页面骨架,再导出代码精细调整,或者反过来,将已有项目导入设计器进行可视化维护。
  • AI 提示词更靠谱:我们的提示词体系与编译器深度绑定,相当于“提示词即协议”,AI 生成的代码可以直接通过编译,大大减少手工修 bug 的时间。
  • 企业级稳定:多轮测试覆盖,修复了多种边缘情况(如嵌套全局 API、内部变量污染等),生产环境可直接升级。

📦 如何升级?

开源用户

npm run clean && npm install

私有部署用户

  1. 登录平台,访问高级服务下载最新源码。
  2. npm run clean && pnpm install
  3. 更新 AI 提示词(文件在 /_docs/prompts/coder.md
  4. 添加配套 skills(目录 /_docs/skills/),可用 npm run seed 自动写入。

🚀 未来可期

v2.5.0 只是一个里程碑,我们还在持续优化多框架支持、可视化调试和 AI 生成质量。VTJ.PRO 坚持做 “专业开发者的低代码工具”,既不阉割功能,也不绑架代码。

欢迎下载体验,一起推动低代码走向真正的工程化!🎉