Vue组件运行时提升渲染速度的方法、装置、设备和介质与流程

本发明涉及vue组件开发领域，特别涉及一种vue组件在运行时提升渲染速度的方法装置、设备和介质。

背景技术：

1、在常规的vue组件开发行为中，大家都有用render来渲染vue组件的写法，因为render的性能是很高的。

2、但是由于vue是一个双向绑定的前端框架，它的底层机制可以基于数据的改变，自动刷新(或者说渲染)页面；因此直接用render渲染对象会存在多次执行的问题，如果在render内进行计算，就会存在计算多次的情况，降低效率；如果计算的复杂度较高，就会导致卡顿。当然，我们可以利用computed特性(computed方法的机制：只有基于当前组件与这个计算属性有关的参数发生变化时，才会触发计算)来减少render内的计算，但是computed方法也只能是针对普通对象的属性绑定，不能是多层对象和数组；但是多层对象和数组这种形式的数据值是日常vue开发中比较常见的，这就导致了在常用的设备上，可能只有几毫秒的计算，影响并不大，但是对于一些低端机型而言，由于cpu相对较差一点，这个几毫秒可能就被几何级放大，变成几十毫秒，如果页面上的vue组件较多，几十毫秒又会再次成倍的放大，就会导致页面在整体渲染上出现卡顿现象。

技术实现思路

1、本发明要解决的技术问题，在于提供一种vue组件运行时提升渲染速度的方法、装置、设备和介质，通过双向绑定多层对象或者数组的vue组件，在vue组件运行时提升渲染速度，大大减少了卡顿现象。

2、第一方面，本发明提供了一种vue组件运行时提升渲染速度的方法，包括下述步骤：

3、步骤s1、在render方法内，将组件内的属性使用computed方法算出结果，记为对象a；

4、步骤s2、对所述对象a执行一次复制了属性和方法的深拷贝，得到对象b；此时，所述对象a和所述对象b都有相同的属性和方法，相同的属性包括path属性；

5、步骤s3、用所述对象b去调用render方法内置的h方法，所述h方法为vue内置的创建节点的方法，从而使前端界面最终渲染的绑定关系是在所述对象b上；

6、步骤s4、在后续的render过程中，判断所述对象b是否有更新，若是，则直接执行步骤s5至步骤s7；若否，说明所述对象b没有任何操作，则等待下一次的h调用，即用所述对象b去调用render方法内置的h方法；

7、步骤s5、对所述对象b的path属性进行监听，当所述对象b的path属性发生改变，则将所述对象b的path属性变化同步给所述对象a；

8、步骤s6、所述对象a的path属性变化，触发通知所述对象a反向深拷贝所述对象b的所有属性，使所述对象a发生更新；

9、步骤s7、根据vue的双向绑定机制，所述对象a的更新引发再次render，触发computed进行二次计算，render方法内置的h方法得到一个新的对象b，重新渲染，刷新页面。

10、第二方面，本发明提供了一种vue组件运行时提升渲染速度的装置，包括：

11、计算模块，用于在render方法内，将组件内的属性使用computed方法算出结果，记为对象a；

12、深拷贝模块，用于对所述对象a执行一次复制了属性和方法的深拷贝，得到对象b；此时，所述对象a和所述对象b都有相同的属性和方法，相同的属性包括path属性；

13、调用模块，供所述对象b去调用render方法内置的h方法，所述h方法为vue内置的创建节点的方法，从而使前端界面最终渲染的绑定关系是在所述对象b上；

14、判断模块，用于在后续的render过程中，判断所述对象b是否有操作，若是，则直接执行步骤s5至步骤s7；若否，则等待下一次的h调用，即用所述对象b去调用render方法内置的h方法；

15、同步模块，用于对所述对象b的path属性进行监听，当所述对象b的path属性发生改变，则将所述对象b的path属性变化同步给所述对象a；

16、反向深拷贝模块，用于当所述对象a的path属性变化时，触发通知所述对象a反向深拷贝所述对象b的所有属性，使所述对象a发生更新；

17、渲染模块，用于根据vue的双向绑定机制，通过所述对象a的更新引发再次render，触发computed进行二次计算，render方法内置的h方法得到一个新的对象b，重新渲染，刷新页面。

18、第三方面，本发明提供了一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现第一方面所述的方法。

19、第四方面，本发明提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现第一方面所述的方法。

20、本发明实施例中提供的一个或多个技术方案，至少具有如下技术效果或优点：在运行端，在使用render方法做渲染时，通过computed方法做计算，基于vue的双向机制，利用对象深拷贝的机制，避开二次render时也触发computed方法的计算；再利用path属性的捆绑避开深拷贝不触发computed方法的计算的问题，达成了对数据computed方法的计算只在关键时候触发，最终减少render内的计算的时长，以此提升整体渲染速度，减少卡顿现象。

21、上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

技术特征：

1.一种vue组件运行时提升渲染速度的方法，其特征在于：包括下述步骤：

2.一种vue组件运行时提升渲染速度的装置，其特征在于：包括：

3.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1所述的方法。

4.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1所述的方法。

技术总结
本发明提供一种Vue组件运行时提升渲染速度的方法、装置、设备和介质，方法包括：在render方法内，将组件内的属性使用computed方法算出结果，记为对象A；通过深拷贝复制了对象A的属性和方法，得到对象B；用所述对象B去调用render方法内置的h方法，使前端界面最终渲染的绑定关系是在所述对象B上；当所述对象B的path属性发生改变，则同步给所述对象A；触发通知所述对象A反向深拷贝所述对象B的所有属性；引发再次render，触发computed进行二次计算，h方法得到一个新的对象B，重新渲染，刷新页面。本发明的computed只在关键时候触发，减少render的计算时长，提升整体渲染速度。

技术研发人员：刘平
受保护的技术使用者：摩尔元数（福建）科技有限公司
技术研发日：
技术公布日：2024/1/15