[发明专利]一种AntV x6中嵌入Vue组件的方法和装置

说明书

本发明涉及计算机图形领域，特别是涉及一种AntV x6中嵌入Vue组件的方法和装置。主要包括：为每个拓扑图创建唯一的根Vue实例；为每个Vue组件生成DOM移植组件，并创建关联所有Vue组件的Vue渲染组件，通过Vue渲染组件将所有Vue组件挂载在唯一的根Vue实例中；创建Vue组件管理工具，使用Vue组件管理工具管理所有Vue组件列表及每个Vue组件和对应的DOM移植组件与拓扑图节点之间一对一的绑定关系；根据Vue组件的渲染数据，使用Vue组件管理工具管理Vue渲染组件进行对应拓扑图节点的渲染。本发明可以使得所有Vue组件能够通过根Vue实例共享数据，并且无需针对每个拓扑图节点的变化对Vue组件进行变化，提高了渲染效率。

技术领域

本发明涉及计算机图形领域，特别是涉及一种AntV x6中嵌入Vue组件的方法和装置。

背景技术

进行前端开发时，用户可以使用AntV x6图形框架及Vue2.0开源前端框架，使用拖拽、编辑、删除等方式，建立各种逻辑关系的拓扑图。上述框架通过对资源进行抽象化、图形化，使得用户可以方便、快捷的管理各种资源，及时的处理各资源运行过程中的问题，能够清晰的查看各个资源之间的关联关系。

在原始的AntV x6拓扑图节点实例中，仅支持SVG(Scalable Vector Graphics，可缩放矢量图形)格式文件、文本、原生的HTML(Hyper Text Markup Language，超文本标记语言)内容的嵌入，当拓扑图节点的功能需求比较复杂,如需要各种工具菜单,动画效果时,使用原生的HTML生成对应的文档对象模型(Document Object Model，简写为DOM)结构就变得非常困难,AntV x6用一种嵌入Vue实例的方式来解决了上述困难,该方法的思路如图1所示。

这种方式存在的问题一：每个节点都需要绑定一个甚至多个独立的Vue实例,由于Vue实例之间是相互独立的,如果需要各个Vue实例间进行数据的共享,那就需要如图2所示，将需要共享的数据传入拓扑图节点,然后再传入Vue实例,数据的一层层的传递使得拓扑图与外部的数据共享变得复杂,且不易于扩展维护。

存在的问题二：每个Vue实例都被对应的拓扑图节点引用,而每个Vue实例都会占用一定的内存,且该内存在拓扑图存续期间会一直存在,当拓扑图中的节点数量过多的时候,就会导致浏览器的内存开销非常大。且由于每个Vue实例的创建都有前置的数据处理的过程，这个过程包括路由的处理、公共数据的处理、国际化的处理、公共组件的处理、公共mixins的处理等等,以上数据处理完成后,才会依次渲染Vue组件,拓扑图动态刷新的过程中,频繁创建,更新，销毁Vue实例就会降低图形的渲染速度,影响用户体验。

鉴于此，如何克服现有技术所存在的缺陷，解决现有技术中在一个拓扑图中使用多个Vue实例造成的缺陷，是本技术领域待解决的问题。

发明内容

针对现有技术的以上缺陷或改进需求，本发明解决了在一个拓扑图中使用多个Vue实例导致的数据共享困难和渲染效率降低的问题。

本发明实施例采用如下技术方案：

第一方面，本发明提供了一种AntV x6中嵌入Vue组件的方法，具体为：为每个拓扑图创建唯一的根Vue实例，并向根Vue实例中传入所有Vue组件需要使用的全局数据；创建Vue渲染组件,关联所有Vue组件列表,将Vue组件列表绑定为响应式数据,并为每个Vue组件生成DOM移植组件，通过Vue渲染组件将所有Vue组件挂载在唯一的根Vue实例中；创建Vue组件管理工具，使用Vue组件管理工具管理所有Vue组件列表及每个Vue组件和对应的DOM移植组件与拓扑图节点之间一对一的绑定关系；根据Vue组件的渲染数据，使用Vue组件管理工具管理Vue渲染组件进行对应拓扑图节点的渲染。