Renderer API 参考VTJ Renderer API 提供了一套全面的工具用于将 DSL 模式渲染为 Vue 组件管理运行时上下文以及处理完整的渲染生命周期。本文档专为需要集成、扩展或自定义渲染系统的高级开发者设计。架构概述渲染系统由多个相互连接的模块组成它们协同工作将 DSL 模式转换为功能性的 Vue 组件核心渲染 APIcreateRenderer(options)根据 DSL 模式创建 Vue 组件渲染器处理组件创建的所有方面包括状态管理、生命周期钩子和节点渲染。签名function createRenderer(options: CreateRendererOptions): { renderer: DefineComponent; context: Context; };参数参数类型默认值描述VueanyglobalVue用于渲染的 Vue 实例modeContextModeRuntime渲染模式 (Runtime, Design, Raw, VNode)dslBlockSchemarequired要渲染的 DSL 模式componentsRecordstring, any{}组件注册表libsRecordstring, any{}库依赖apisRecordstring, any{}API 函数loaderBlockLoaderdefaultLoader组件加载器函数windowWindowwindow用于样式注入的 Window 对象返回值renderer: 准备好进行注册或渲染的 Vue DefineComponentcontext: 管理渲染状态的 Context 实例示例const { renderer, context } createRenderer({ Vue, dsl: myBlockSchema, components: { ElButton, ElInput }, libs: { lodash: _ }, apis: { fetchUser }, }); app.component(MyBlock, renderer);来源: packages/renderer/src/render/block.ts#L30-L95上下文 APIContext类管理渲染过程中的执行环境处理表达式解析、函数执行和作用域管理。构造函数class Context { constructor(options: ContextOptions); }选项interface ContextOptions { mode: ContextMode; dsl?: BlockSchema; attrs?: ContextAttrs; }关键属性属性类型描述__modeContextMode当前渲染模式__idstring | null块标识符stateRecordstring, any响应式状态对象contextRecordstring, any执行上下文$refsRecordstring, any组件引用$componentsRecordstring, any组件注册表$libsRecordstring, any库注册表$apisRecordstring, anyAPI 注册表$providerProviderProvider 实例核心方法__parseExpression(code)在上下文中解析和求值 JSExpression 节点。__parseExpression(code?: JSExpression | JSFunction): any示例const value context.__parseExpression({ type: JSExpression, value: state.count 1, });__parseFunction(code)从 JSFunction 节点解析并创建函数。__parseFunction(code?: JSFunction): Function示例const handler context.__parseFunction({ type: JSFunction, value: (event) console.log(event), });__ref(id, ref)创建引用处理器以跟踪 DOM 节点和组件实例。__ref(id: string | null, ref?: string | Function): (el: any) void示例const refHandler context.__ref(node-123, myRef); // 返回函数: (el) { ... }__clone(context)创建一个合并了属性的新上下文用于作用域渲染例如 v-for 迭代。__clone(context?: Recordstring, any): Context示例const iterationContext context.__clone({ item: data[0], index: 0 });setup(attrs, Vue)使用 Vue 实例属性和生命周期钩子初始化上下文。setup(attrs: Recordstring, any, Vue?: any): void节点渲染 APInodeRender(dsl, context, Vue, loader, brothers, isBranch)核心渲染函数将单个节点模式转换为 Vue VNode。签名function nodeRender( dsl: NodeSchema, context: Context, Vue?: any, loader?: BlockLoader, brothers?: NodeSchema[], isBranch?: boolean, ): VNode | VNode[] | null;参数参数类型默认值描述dslNodeSchemarequired要渲染的节点模式contextContextrequired渲染上下文VueanyglobalVueVue 实例loaderBlockLoaderdefaultLoader组件加载器brothersNodeSchema[][]用于 v-if/else-if/else 链的兄弟节点isBranchbooleanfalse是否为条件链中的分支支持的功能条件渲染: v-if, v-else-if, v-else 指令列表渲染: 带有自定义迭代器的 v-for双向绑定: 带修饰符的 v-model可见性控制: v-show 指令指令: 通过应用上下文的自定义指令HTML 注入: 用于可信内容的 v-html表达式绑定: 用于动态属性的 v-bind指令处理内置指令渲染器支持在 constants.ts 中定义的这些内置指令指令描述示例vIf条件渲染{ name: vIf, value: state.visible }vElseIf替代条件{ name: vElseIf, value: state.alt }vElse后备条件{ name: vElse }vFor列表迭代{ name: vFor, value: items, iterator: { item: i, index: idx } }vModel双向绑定{ name: vModel, value: state.value }vShow可见性切换{ name: vShow, value: state.visible }vBind对象绑定{ name: vBind, value: state.props }vHtmlHTML 内容{ name: vHtml, value: state.content }getModifiers(modifiers, isToString?)从指令修饰符中提取并格式化修饰符名称。function getModifiers( modifiers: NodeModifiers {}, isToString?: boolean, ): string[];示例const mods getModifiers({ prevent: true, stop: true }); // 返回: [prevent, stop]块加载器 APIdefaultLoader(name, from, Vue)默认组件加载器仅返回组件名称。const defaultLoader: BlockLoader (name: string) name;createLoader(opts)创建增强型块加载器支持异步组件、模式块、基于 URL 的模式和插件。签名function createLoader(opts: CreateLoaderOptions): BlockLoader;选项interface CreateLoaderOptions { getDsl: (id: string) PromiseBlockSchema | null; getDslByUrl: (url: string) PromiseBlockSchema | null; options: PartialCreateRendererOptions; }加载器类型来源类型描述示例string直接组件名称ElButtonSchema通过 ID 的块模式{ type: Schema, id: block-123 }UrlSchema来自 URL 的模式{ type: UrlSchema, url: https://... }Plugin插件组件{ type: Plugin, library: MyLib, urls: [...] }getPlugin(from, global)从 URL 异步加载插件组件。async function getPlugin( from: NodeFromPlugin, global?: any, ): PromiseBlockPlugin | null;示例const plugin await getPlugin({ library: MyPlugin, urls: [ https://cdn.example.com/plugin.css, https://cdn.example.com/plugin.js, ], });clearLoaderCache()清除所有缓存的加载器和队列操作。function clearLoaderCache(): void;Provider APIProvider 类是项目管理、服务协调和资源加载的核心协调器。构造函数class Provider extends Base { constructor(public options: ProviderOptions) }选项interface ProviderOptions { service: Service; project?: PartialProjectSchema; modules?: Recordstring, () Promiseany; mode?: ContextMode; adapter?: PartialProvideAdapter; router?: Router; dependencies?: Recordstring, () Promiseany; materials?: Recordstring, () Promiseany; libraryOptions?: Recordstring, any; globals?: Recordstring, any; materialPath?: string; nodeEnv?: NodeEnv; install?: (app: App) void; routeAppendTo?: RouteRecordName; pageRouteName?: string; routeMeta?: RouteMeta; enhance?: (app: App, provider: Provider) void; vtjDir?: string; vtjRawDir?: string; enableStaticRoute?: boolean; }关键属性属性类型描述modeContextMode当前执行模式globalsRecordstring, any全局变量modulesRecordstring, Function异步模块加载器adapterProvideAdapter服务适配器apisRecordstring, FunctionAPI 函数dependenciesRecordstring, Function依赖加载器materialsRecordstring, Function物料加载器libraryRecordstring, any已加载的库serviceService核心服务实例projectProjectSchema当前项目配置componentsRecordstring, any组件注册表核心方法load(project)加载并初始化项目包括依赖、模拟数据、API 和路由。async load(project: ProjectSchema): Promisevoid初始化步骤从模块或服务加载项目模式加载依赖Raw 模式或完整资源其他模式初始化 Mock.js 配置从模式创建 API 接口初始化路由非 uniapp 平台触发就绪事件createMock(func)使用 Mock.js 创建模拟数据生成器。createMock(func: (...args) any): (...args) Promiseany示例const mockUser provider.createMock(() ({ name: name, email: email, })); const user await mockUser();loadDependencies(_window)加载依赖模块并在全局注册它们。private async loadDependencies(_window: any {}): PromisevoidloadAssets(_window)加载所有项目资源包括库、样式和物料。private async loadAssets(_window: any {}): Promisevoid资源加载过程解析依赖配置加载库脚本和 CSS注册内置组件加载物料描述注册物料组件initRouter()使用页面和主页路由初始化 Vue Router。private initRouter(): void服务 APIBaseService类提供所有后端集成方法的基础服务实现。构造函数class BaseService implements Service { constructor(public req: IStaticRequest request) }服务方法方法描述返回值getExtension()获取扩展配置PromiseVTJConfiginit(project)初始化项目模式PromiseProjectSchemasaveProject(project, type?)保存项目PromisebooleansaveMaterials(project, materials)保存物料描述PromisebooleansaveFile(file)保存块模式PromisebooleangetFile(id)获取块模式PromiseBlockSchemaremoveFile(id)删除文件PromisebooleansaveHistory(history)保存历史记录PromisebooleangetHistory(id)获取历史记录PromiseHistorySchemagetHistoryItem(fId, id)获取历史记录项PromiseHistoryItemsaveHistoryItem(fId, item)保存历史记录项PromisebooleanremoveHistoryItem(fId, ids)删除历史记录项Promisebooleanpublish(project)发布项目PromisebooleanpublishFile(project, file)发布文件PromisebooleangenVueContent(project, dsl)生成 Vue 代码PromisestringparseVue(project, options)解析 Vue 为 DSLPromiseBlockSchemacreateRawPage(file)创建原始页面PromisebooleanremoveRawPage(id)删除原始页面PromisebooleanuploadStaticFile(file, projectId)上传静态文件PromiseStaticFileInfogetStaticFiles(projectId)获取静态文件PromiseStaticFileInfo[]removeStaticFile(name, projectId)删除静态文件PromisebooleanclearStaticFiles(projectId)清除静态文件PromisebooleangetPluginMaterial(from)获取插件物料PromiseMaterialDescriptiongenSource(project)生成源代码Promisestring辅助函数createServiceRequest(notify?)创建已配置的 HTTP 请求服务。function createServiceRequest(notify?: (msg: string) void): IStaticRequest;常量和枚举ContextMode枚举定义不同的渲染模式enum ContextMode { Runtime Runtime, // 生产运行时 Design Design, // 设计器模式 Raw Raw, // 源代码模式 VNode VNode, // 虚拟节点模式 }NodeEnv枚举环境类型定义enum NodeEnv { Production production, Development development, }内置常量常量描述值CONTEXT_HOSTVue 实例属性名称[$el, $emit, $nextTick, ...]LIFE_CYCLES_LIST生命周期钩子[beforeCreate, created, ...]BUILT_IN_DIRECTIVES支持的指令[vIf, vElseIf, vElse, ...]DATA_TYPESProp 数据类型{ String, Number, Boolean, ... }PAGE_ROUTE_NAME页面路由名称VtjPageHOMEPAGE_ROUTE_NAME主页路由名称VtjHomepageHTML_TAGS原生 HTML 标签逗号分隔的标签列表BUILD_IN_TAGS内置组件标签[component, slot]工具函数createDataSources(dataSources, context)创建用于 API 调用和模拟数据的数据源函数。function createDataSources( dataSources: Recordstring, DataSourceSchema, context: Context, ): Recordstring, DataSourceHandler;数据源类型mock: 使用 Mock.js 生成数据api: 调用注册的 API 函数并可选进行转换createProps(props, context)创建具有类型验证和默认值的组件 props 定义。function createProps( props: Arraystring | BlockProp, context: Context, ): Recordstring, PropOptions;createState(Vue, state, context)创建响应式状态对象。function createState( Vue: any, state: BlockState, context: Context, ): Recordstring, any;createComputed(Vue, computedSchema, context)创建计算属性。function createComputed( Vue: any, computedSchema: Recordstring, JSFunction, context: Context, ): Recordstring, ComputedRef;createMethods(methods, context)创建方法函数。function createMethods( methods: Recordstring, JSFunction, context: Context, ): Recordstring, Function;setWatches(Vue, watches, context)为响应式数据设置监视器。function setWatches(Vue: any, watches: BlockWatch[], context: Context): void;createLifeCycles(lifeCycle, context)创建生命周期钩子处理器。function createLifeCycles( lifeCycle: Recordstring, JSFunction, context: Context, ): Recordstring, Function;插件系统Access 插件Access 插件提供身份验证和授权功能。获取位置packages/renderer/src/plugins/access.ts Access 插件与 ACCESS 常量中定义的全局身份验证端点和存储密钥集成。当 provider 配置了访问适配器时它会自动初始化。集成示例基础组件渲染import { createRenderer } from vtj/renderer; import * as Vue from vue; const { renderer } createRenderer({ Vue, dsl: { id: my-block, name: MyBlock, state: { count: 0 }, nodes: [ { id: button-1, name: el-button, props: { type: primary }, events: { click: { type: JSFunction, value: state.count }, }, children: Count: ${state.count}, }, ], }, components: { ElButton }, }); // 在 Vue 应用中注册 app.component(MyComponent, renderer);动态块加载import { createLoader, createRenderer } from vtj/renderer; const loader createLoader({ async getDsl(id) { const response await fetch(/api/blocks/${id}); return response.json(); }, async getDslByUrl(url) { const response await fetch(url); return response.json(); }, options: { Vue, components: { ElButton }, loader: null, // 将递归设置 }, }); // 在渲染器中使用加载器 const { renderer } createRenderer({ Vue, dsl: parentSchema, loader, });Provider 集成import { Provider } from vtj/renderer; import { BaseService, createServiceRequest } from vtj/renderer; const provider new Provider({ service: new BaseService(createServiceRequest()), mode: ContextMode.Runtime, project: { id: my-project }, router, dependencies: { ElementPlus: () import(element-plus), }, materials: { MyMaterials: () import(./materials), }, }); // 加载项目 await provider.load({ id: my-project }); // 访问组件和 API const components provider.components; const apis provider.apis;API 参考摘要模块用途主要导出render/block组件渲染createRenderer,createDataSourcesrender/context上下文管理Context类render/node节点渲染nodeRender,getModifiersrender/loader块加载createLoader,getPlugin,clearLoaderCacheprovider项目管理Provider类,providerKeyservices/base服务层BaseService,createServiceRequestconstants常量ContextMode,BUILT_IN_DIRECTIVES,DATA_TYPESutils工具函数isJSExpression,isJSFunction,parseDepsplugins插件访问控制插件hooks钩子与遮罩相关的钩子 所有 API 均支持 TypeScript 并提供全面的类型定义。从vtj/core导入 DSL 模式的类型从vtj/renderer导入运行时接口的渲染器特定类型。相关文档Engine API Reference: 了解与渲染器协同工作的引擎核心 APIProvider API Reference: 深入了解 provider 系统和服务集成Renderer System and Runtime: 理解渲染器架构和生命周期DSL Schema and Data Models: 用于渲染的 DSL 模式结构参考资料官方文档https://vtj.pro/在线平台https://app.vtj.pro/开源仓库https://gitee.com/newgateway/vtj