[发明专利]一种基于Vue3组件的页面渲染方法、装置、介质及电子设备

权利要求书

1.一种基于Vue3组件的页面渲染方法，其特征在于，包括：

创建虚拟标签对象；其中，所述虚拟标签包括标签类型、标签名称、标签属性、标签内容中的至少一种，且所述虚拟标签用于描述文档对象模型；

实例化Webworker对象，确定运行Vue3组件的独立线程；

实例化虚拟标签，并采用预先定义的信息传递函数，将所述实例化虚拟标签传递至浏览渲染线程，以进行页面渲染。

2.根据权利要求1所述的方法，其特征在于，所述预先定义的信息传递函数的定义过程包括：

根据Vue3组件中的Custom Renderer API介绍，确定Custom Renderer API的目标覆盖方法；

对所述目标覆盖方法进行覆盖处理，得到Render函数，即信息传递函数。

3.根据权利要求2所述的方法，其特征在于，对所述目标覆盖方法进行覆盖处理，得到Render函数，包括：

对所述目标覆盖方法进行重新定义，得到目标覆盖方法的改写方法；其中，所述目标覆盖方法包括：insert，remove，createElement，createText，createComment，setText，setElementText，parentNode，nextSibling，querySelector以及setScopeId；

将所述改写方法替换掉所述目标覆盖方法，得到改写后的Render函数。

4.根据权利要求2所述的方法，其特征在于，采用预先定义的信息传递函数，将所述实例化虚拟标签传递至浏览渲染线程，包括：

采用Render函数将实例化虚拟标签按照JSON字符串的形式传递至浏览渲染线程，供所述浏览渲染线程根据所述实例化虚拟标签确定文档对象模型，并根据所述文档对象模型进行页面渲染。

5.根据权利要求1所述的方法，其特征在于，在将所述实例化虚拟标签传递至浏览渲染线程，以进行页面渲染之后，所述方法还包括：

采用所述独立线程的postMessage监听方法对页面渲染结果进行监听。

6.根据权利要求1所述的方法，其特征在于，在将所述实例化虚拟标签传递至浏览渲染线程，以进行页面渲染之后，所述方法还包括：

若检测到交互触发事件，则通过所述浏览渲染线程向所述独立线程发出触发事件JSON字符串；

通过读取触发事件JSON字符串的事件ID来确定事件内容；

根据所述事件内容确定响应数据，并将所述响应数据实例化为事件响应虚拟标签，并向所述浏览渲染线程发出事件响应虚拟标签，供所述页面进行交互触发事件的响应。

7.根据权利要求1所述的方法，其特征在于，所述Vue3组件，包括：

基础组件，并具体包括：布局Layout、按钮Button、导航NavBar以及容器Page；

交互组件，并具体包括：加载框Loading、弹出框Modal、消息提示Toast、通知Notification以及动作面板ActionSheet；

表单组件，并具体包括：输入框Input、单选框Radio、多选框CheckBox以及下拉选择Select；

展示组件，并具体包括：表格Table、列表List、下拉刷新Refresh、滑动Swiper以及选项卡Tab。

8.根据权利要求7所述的方法，其特征在于，所述Vue3组件，还包括服务组件，所述服务组件具体包括：

网络Network，用于在Vue3组件工作过程中访问后端接口；

缓存Storage，用于使用本地indexedDB缓存数据；

图片加载ImageLoad，用于将图片转换为ArrayBuffer格式，以在所述独立线程下载；

格式转换Format，用于提供时间日期或者正则校验工具函数。