渲染前的准备
渲染前的准备，在 Vue 渲染框架下，会先安装所有所支持的默认组件，比如 Mask，Header 等，这些组件支持 XML 默认模版的 Vue 框架下的渲染，详情可见 main.ts 中，maskInstall 与 install，这两个函数将平台内部支持的组件进行了注册，随后将整个 Vue 挂载为运行时 App，随后进行初始化。
渲染的起步
OioProvider 方法是整个应用的入口，我们忽略掉一些配置方
法，将注意力集中到 initializeServices 从名称中我们可以看出来内部保存的都是初始化服务，其中提供了渲染服务等，我们当前使用的是 Vue 框架，所以当前其渲染的 Root 节点为 Vue， 以此，我们视野可以暂时转移到 admin-base中的 Root.vue以及 RootWidget上， 其实现了整个 Vue 框架下的 Root 节点如何渲染，其中定义了多个 widget，比如登陆页，首页，忘记密码已经重置密码等页面， 在本文中我们着重关注渲染首页的能力，RootWidget将 DefaultMetadataMainViewWidget作为渲染 Props中的 page即首页提供给下层组件使用，
渐入佳境
DefaultMetadataMainViewWidget从名称中可以看到，其为元数据主视图，主要做两件事，
1:提供 Mask 的渲染
2:提供元数据上下文初始化
该组件主要通过观察路由变化触发上面两个动作，当路由发生变化，该组件 reloadPage将被调用，reloadPage方法通过组装路由参数构成一个唯一 key 向后段查询当前路由所对应的渲染信息， 随后将获取到的信息进行处理，初始化，即 元数据上下文初始化，
在初始化后，会将获取到的数据注入到 MetadataViewWidget中，
Mask 的渲染
关于 Mask 的渲染，在获取到数据后，将生成 maskTemplate，并将其赋值， DefaultMetadataMainView.vue文件将渲染该模板，并渲染到页面中
数据的变更
当上面两件任务完成后，将开始主视图的渲染，
上文提到，DefaultMetadataMainViewWidget只负责 mask 的渲染和上下文的初始化，所以 DefaultMetadataMainViewWidget通过触发事件的方式来实现主视图的渲染， DefaultMetadataMainViewWidget将必要信息作为事件参数触发，MultiTabsContainerWidget接收到 reloadMainViewCallChaining事件后，开启主视图渲染，
MultiTabsContainerWidget会刷新运行时上下文，即 refreshRuntimeContext，该方法将尝试查询并通过 createOrUpdateEnterTab方法创建 Tab 页，createOrUpdateEnterTab最终生成一个 MultiTabItem格式的对象，该对象描述了 Tab 的相关信息，随后调用 createTabContainerWidget创建 tab 的容器即新建了一个 MultiTabContainerWidget组件即单个 tab 的容器，随后调用 setActiveTabItem， 并获取其绑定的 Vue 组件，并将其组件放置在 KeepAlive内部，触发更新,
主视图的渲染
MultiTabContainerWidget继承自MetadataViewWidget，
当 MetadataViewWidget数据发生变更， 其绑定的 Vue 组件将解析 viewTemplate, 获取到与该模板 dslNodeType想匹配的 Vue 组件，当前例子中为 View.vue，
随后 View.vue开始渲染，View.vue文件只是一个纯粹的容器，
当 View.vue被挂载时，其内部的 template属性包含了整个页面的描述信息，View.vue需要做的就是将这个 template翻译并渲染成 DOM 展现在浏览器上，
渲染整个页面
当 View.vue被挂载时，其内部的 template属性包含了整个页面的描述信息，View.vue主要做了两个事情，一：将 template 中的 widget转换为组件，二：根据当前的 template信息生成 slot信息，
const currentSlots = computed<Slots | undefined>(
() =>
DslRender.fetchVNodeSlots(props.dslDefinition) ||
(Object.keys(context.slots).length ? context.slots : undefined)
);
const renderWidget = createCustomWidget(InternalWidget.View, {
...context.attrs,
type: props.type || viewType.value,
template: props.dslDefinition,
metadataHandle: props.metadataHandle || metadataHandle.value,
rootHandle: props.rootHandle || rootHandle.value,
parentHandle: props.parentHandle || parentHandle.value,
slotName: props.slotName,
inline: inlineProp
} as ViewWidgetProps);
生成这两部分信息后，View.vue会将这两部分挂载到页面上，这两部分从代码中可以看出，主要靠 fetchVNodeSlots,createCustomWidget两个函数，
export function createCustomWidget(
widget: string,
props: CustomWidgetProps
): RenderWidget | undefined
public static fetchVNodeSlots(dsl: DslDefinition | undefined, supportedSlotNames?: string[]): Slots | undefined从函数名称中我们可以看出，这两个函数一个会去创建 widget，一个会创建 slot,这就不得不提到 dsl-render.ts
dsl-render
从名称中我们可以看出 dsl-render.ts是专门用来渲染 DSL 的，其内部通过 fetchComponent函数返回不同 dslType对应的 Vue 组件，通过 fetchVNodeSlots去构建 Vue 插槽，当组件开始渲染时，UseWidgetTagMixin将混入各布局组件，通过基类 VueWidget所提供的 render能力将自己渲染成为容器，并且将 dslDefinition转换为 slot，将两者整合并挂载。此来层层向下进行渲染。渲染完成后Vue组件将触发自身的生命周期钩子，在VueWidget中，其将Widget组件自身的生命周期混入Vue生命周期，在Vue组件触发钩子后，将带动Wiget生命周期钩子的触发。以表格页面为例，将获取 TableView组件，并渲染至 View.vue中,随后触发 $$mounted钩子。
数据的获取
当 TableView组件被挂载到页面时，触发 mounted生命周期钩子，并在基类 BaseView中发出 currentMountedCallChaining事件， BaseElementViewWidget监听到后，调用 mountedProcess，最终调用到 BaseElementListViewWidget，开始进行数据源请求，fetchData, 获取到数据后，调用 reloadDataSource
数据的变更
当搜索组件内部数据发生变更，将触发 SearchWidget.ts中 onSearch 事件，该事件将组装请求体，并且将请求体作为事件参数传递，外层的 SearchView接收到该事件后会进一步向外传播事件，并最终传递到 TableWidget.ts,该组件开始 refreshProcess刷新进程，该方法实际动作基本由基类 BaseElementListViewWidget提供,
该功能会以新数据向后端进行请求，随后将数据进行存储，触发子组件的更新，其核心逻辑类似于上一点中提到的数据的获取，不同的点在于触发点的区别，一个由mounted钩子触发，一个则由onSearch事件触发
Oinone社区 作者：liji2原创文章，如若转载，请注明出处：https://doc.oinone.top/frontend/20732.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
