AI 驱动的 Vue3 应用开发平台 深入探究（三）：核心概念之引擎架构与生命周期

引擎架构与生命周期VTJ 引擎通过多层架构编排了一个复杂的低代码开发环境将设计时和运行时的关注点分离同时保持无缝的双向通信。该架构在统一的生态系统中实现了 AI 驱动的开发、可视化编辑和代码生成。核心架构概述引擎遵循分层微内核架构在四个主要层级上实现了清晰的关注点分离编排层、资源管理层、模拟层和渲染层。采用的设计模式包括依赖注入、事件驱动通信和基于提供者的资源分配。Engine 类作为中央编排枢纽管理从初始化到销毁的整个生命周期。它协调设计时交互通过 Designer、运行时渲染通过 Renderer 和 Simulator以及资源管理通过 Provider 和 Assets。状态管理State和扩展系统ToolRegistry提供了可插拔的自定义能力。引擎组件与职责Engine 核心Engine 类第 168-727 行是主要的协调器负责初始化和管理所有子系统。它维护对关键状态的反应式引用包括当前项目、活动块文件、渲染上下文和历史管理器。组件类型用途生命周期appApp | undefined设计器 UI 的 Vue 应用实例在render()中创建在dispose()中销毁projectRefProjectModel | null当前加载的项目模型在init()中初始化通过事件进行反应式更新currentRefBlockModel | null当前正在编辑的块/页面通过updateCurrent()更新contextRefContext | null渲染执行上下文从 simulator.renderer.context 同步historyRefHistoryModel | null撤销/重做管理在initHistory()中初始化providerProvider资源和依赖管理器在构造函数中创建simulatorSimulator隔离的渲染环境在构造函数中创建designerDesigner设计交互处理器在 simulator.render() 中创建Engine 构造函数通过创建 Provider、Simulator、Assets 和其他子系统奠定基础然后启动初始化序列加载项目资源并渲染设计器界面。Provider 系统Provider 类packages/renderer/src/provider/provider.ts中的第 112-732 行管理所有外部资源包括依赖项、物料、API 和运行时全局变量。它根据ContextMode以不同的模式运行模式描述使用场景Runtime生产运行时环境运行生成的应用程序Design带有模拟器的设计时低代码设计器画布Raw源代码模式Vue 源代码编辑VNode虚拟节点渲染高级渲染场景Provider 的load()方法第 205-249 行执行关键的初始化序列加载项目配置、根据模式加载依赖或资源、初始化模拟 API、设置路由并触发就绪事件。此方法充当项目元数据和可执行运行时之间的桥梁。Simulator 环境Simulator 类packages/designer/src/framework/simulator.ts中的第 77-404 行创建一个隔离的 iframe 环境用于托管实际的 Vue 应用程序渲染。这种隔离防止了样式冲突并在设计器 UI 和渲染内容之间提供了清晰的分离。模拟器环境SimulatorEnv接口第 56-69 行包括window: iframe 的 window 对象Vue: Vue 实例VueRouter: 路由实例library: 已加载的依赖库materials: 已加载的组件物料components: 可用的组件apis: API 模拟实现container: 用于挂载的 DOM 容器globals: 全局变量libraryLocaleMap: 本地化数据locales: 语言环境配置enhance: 可选的增强函数init()方法第 98-172 行设置 iframe、创建全局样式、初始化功能并与父窗口建立通信。此环境充当所有运行时代码执行的沙箱。RendererRenderer 类packages/designer/src/framework/renderer.ts中的第 29-289 行负责在模拟器环境中创建和管理 Vue 应用程序实例。其install()方法第 48-120 行使用插件、路由、全局属性和提供者配置 Vue 应用。Renderer 与 Designer 维持双向关系接收设计更改并将事件发送回引擎。它创建执行 DSL 指定组件和逻辑的实际渲染上下文。DesignerDesigner 类packages/designer/src/framework/designer.ts中的第 60-622 行处理设计画布内的所有用户交互包括拖放操作、选择、悬停状态和视觉反馈。它将事件监听器绑定到模拟器的内容窗口和文档。Designer 解释鼠标事件计算放置位置通过allowDrop()第 569-610 行验证允许的操作并与引擎通信以更新底层模型。引擎生命周期引擎生命周期遵循从初始化到操作再到销毁的明确定义序列。此生命周期是事件驱动的引擎响应各种模型和用户事件。初始化阶段初始化从 Engine 构造函数第 194-244 行开始依赖注入使用提供的选项实例化 Provider、Simulator、Assets、Report 和 State事件绑定bindEvents()方法第 346-359 行为所有项目级事件注册处理器项目加载init()方法第 249-288 行调用provider.load()来初始化项目资源UI 渲染render()方法第 328-341 行创建 Vue 应用程序并将其挂载到设计器容器模拟器设置Simulator 初始化 iframe 环境并为渲染做准备提示初始化序列是异步的。init()调用使用then()与render()链接确保在 UI 渲染之前完全加载项目。这可以防止 UI 尝试访问未初始化资源的竞态条件。运行时操作阶段在运行时引擎以事件驱动的方式运行具有以下关键流程文件激活当用户打开文件时activeFile()处理器第 365-387 行执行从服务加载 DSL从 DSL 创建BlockModel更新当前块引用初始化历史跟踪触发反应式更新文件编辑当设计器修改文件时changeFile()处理器第 393-403 行处理更改检查项目是否已锁定以防止并发编辑将 BlockModel 转换为 DSL通过服务保存 DSL更新当前引用如果启用了autoHistory则自动添加到历史记录历史管理引擎通过 HistoryModel 支持撤销/重做initHistory()第 533-545 行为当前块创建新的历史管理器saveHistory()第 550-582 行将 DSL 状态保存到历史堆栈loadHistory()第 587-603 行从历史记录中恢复先前的状态这些方法由相应的事件EVENT_HISTORY_CHANGE和EVENT_HISTORY_LOAD触发。销毁阶段dispose()方法第 670-713 行执行清理操作卸载设计器 Vue 应用程序销毁模拟器和渲染器从发射器中移除所有事件监听器清除当前块和上下文引用通过基类销毁执行任何额外的清理正确的销毁可以防止内存泄漏并确保在不再需要引擎时释放资源。事件系统引擎依赖于核心包中定义的综合事件系统。事件由模型和组件发出处理器在 Engine 的bindEvents()方法中注册。事件名称处理器触发条件EVENT_PROJECT_CHANGEsaveProject()项目元数据更改EVENT_PROJECT_BLOCKS_CHANGEsaveBlockFile()块文件添加/修改/删除EVENT_PROJECT_PAGES_CHANGEsaveBlockFile()页面文件添加/修改/删除EVENT_PROJECT_DEPS_CHANGEsaveMaterials()依赖项更改EVENT_PROJECT_ACTIVEDactiveFile()文件打开/关闭EVENT_PROJECT_PUBLISHpublish()请求发布项目EVENT_PROJECT_FILE_PUBLISHpublishCurrent()请求发布当前文件EVENT_BLOCK_CHANGEchangeFile()块内容修改EVENT_NODE_CHANGEchangeCurrentFile()块内的节点修改EVENT_HISTORY_CHANGEsaveHistory()添加历史状态EVENT_HISTORY_LOADloadHistory()恢复历史状态EVENT_PROJECT_GEN_SOURCEgenSource()请求源代码生成这种事件驱动的架构解耦了组件并启用了灵活的扩展。自定义插件可以监听这些事件或发出自己的事件以扩展引擎功能。状态管理引擎通过多种反应式机制维护状态反应式状态引擎状态使用 Vue 的ref和shallowReactiveAPI 进行管理project包含 ProjectModel 的 Refcurrent包含活动 BlockModel 的 Refcontext包含渲染 Context 的 Refhistory包含 HistoryModel 的 Refchanged带有 Symbol 值的 Ref用于触发更新这些 refs 包装了triggerRef()以便在需要时强制反应性特别是在异步操作之后。Engine 状态UI 偏好State类packages/designer/src/framework/state.ts中的第 73-198 行管理用户偏好和 UI 设置| 属性 | 类型 | 描述 | | ---------------- | ------- | ------------------------- | ------------------ | |outlineEnabled| boolean | 显示/隐藏设计视图指南 | |activeEvent| boolean | 启用/禁用设计视图事件处理 | |autoApply| boolean | 自动应用 AI 生成的 DSL | |autoHistory| boolean | 在更改时自动保存历史记录 | |llm|string | LLM| 当前选择的 AI 模型 | |LLMs|LLM[]| 可用的 AI 模型 | |tour| boolean | 显示/隐藏入职导览 | |dark| boolean | 启用深色模式 | |streaming| boolean | AI 生成正在进行中 |状态更改会自动保存到本地存储确保用户偏好跨会话持久化。上下文和执行模型Context类packages/renderer/src/render/context.ts中的第 25-197 行为 DSL 代码提供执行环境。它处理函数解析通过__parseFunction()将 JSFunction 字符串转换为可执行函数表达式解析通过__parseExpression()计算 JSExpression 字符串引用管理通过__ref()和__getRefEl()处理组件引用上下文克隆通过__clone()为嵌套作用域创建隔离副本上下文维护基于代理的执行模型该模型拦截属性访问和方法调用启用了 DSL 中定义的数据绑定和计算表达式等功能。扩展点引擎提供了多个用于自定义的扩展点插件系统ToolRegistry 允许注册自定义工具和小组件。EngineOptions 中的install选项允许在创建设计器应用程序时执行自定义初始化逻辑。Provider 适配器EngineOptions 中的adapter选项第 107 行允许自定义提供者行为包括 API 请求、组件解析和路由集成。自定义小组件Designer 框架通过小组件管理器支持自定义小组件。这些可以注册并集成到设计器界面中。Setters属性编辑器可以自定义为特定的组件属性提供量身定制的编辑体验。提示扩展应在引擎的install回调期间注册自己。这确保所有核心子系统都已初始化并提供对引擎实例的访问以便与其他系统集成。集成模式创建引擎实例要创建引擎实例您需要提供容器、服务和项目配置const engine new Engine({ container: document.getElementById(designer-container), service: new MyFileService(), project: { id: my-project, name: My Project, platform: web, }, dependencies: { vue: () import(vue), element-plus: () import(element-plus), }, materials: { my-components: () import(my/ui), }, materialPath: ./node_modules/vtj/ui, globals: { API_BASE: https://api.example.com, }, });引擎异步初始化并在render()方法完成后准备就绪。使用引擎 Hook在设计器内的 Vue 组件中使用useEngine()hook 访问引擎实例import { useEngine } from vtj/designer; const engine useEngine(); // Access engine properties const currentBlock engine.current.value; const project engine.project.value;该 hook 使用 Vue 的inject()API 来检索在应用程序根目录提供的引擎实例。性能考虑引擎架构包含了几种性能优化延迟加载依赖项和物料通过动态导入异步加载浅反应性引擎实例使用shallowReactive以避免深度反应性开销隔离渲染模拟器在 iframe 中运行防止设计器 UI 的样式重新计算事件批处理可以通过triggerRef()在触发反应式更新之前批处理多个更改上下文缓存渲染的组件被缓存以避免冗余重新创建历史节流自动历史保存由autoHistory标志控制以防止过多的状态存储这些优化确保即使处理复杂的项目和大型组件库引擎也能保持响应。引擎的模块化架构为理解低代码功能如何与标准 Vue 开发工作流集成提供了坚实的基础从而在统一的环境中实现可视化编辑和基于代码的开发。项目开源仓库: https://gitee.com/newgateway/vtj