Vue制造技术

本发明专利技术提供一种

【技术实现步骤摘要】
Vue组件运行时提升渲染速度的方法、装置、设备和介质


[0001]本专利技术涉及
Vue
组件开发领域，特别涉及一种
Vue
组件在运行时提升渲染速度的方法装置
、
设备和介质
。

技术介绍

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

技术实现思路

[0004]本专利技术要解决的技术问题，在于提供一种
Vue
组件运行时提升渲染速度的方法
、
装置
、
设备和介质，通过双向绑定多层对象或者数组的
Vue
组件，在
Vue
组件运行时提升渲染速度，大大减少了卡顿现象
。
[0005]第一方面，本专利技术提供了一种
Vue
组件运行时提升渲染速度的方法，包括下述步骤：
[0006]步骤
S1、
在
render
方法内，将组件内的属性使用
computed
方法算出结果，记为对象
A
；
[0007]步骤
S2、
对所述对象
A
执行一次复制了属性和方法的深拷贝，得到对象
B
；此时，所述对象
A
和所述对象
B
都有相同的属性和方法，相同的属性包括
path
属性；
[0008]步骤
S3、
用所述对象
B
去调用
render
方法内置的
h
方法，所述
h
方法为
Vue
内置的创建节点的方法，从而使前端界面最终渲染的绑定关系是在所述对象
B
上；
[0009]步骤
S4、
在后续的
render
过程中，判断所述对象
B
是否有更新，若是，则直接执行步骤
S5
至步骤
S7
；若否，说明所述对象
B
没有任何操作，则等待下一次的
h
调用，即用所述对象
B
去调用
render
方法内置的
h
方法；
[0010]步骤
S5、
对所述对象
B
的
path
属性进行监听，当所述对象
B
的
path
属性发生改变，则将所述对象
B
的
path
属性变化同步给所述对象
A
；
[0011]步骤
S6、
所述对象
A
的
path
属性变化，触发通知所述对象
A
反向深拷贝所述对象
B
的
所有属性，使所述对象
A
发生更新；
[0012]步骤
S7、
根据
Vue
的双向绑定机制，所述对象
A
的更新引发再次
render
，触发
computed
进行二次计算，
render
方法内置的
h
方法得到一个新的对象
B
，重新渲染，刷新页面
。
[0013]第二方面，本专利技术提供了一种
Vue
组件运行时提升渲染速度的装置，包括：
[0014]计算模块，用于在
render
方法内，将组件内的属性使用
computed
方法算出结果，记为对象
A
；
[0015]深拷贝模块，用于对所述对象
A
执行一次复制了属性和方法的深拷贝，得到对象
B
；此时，所述对象
A
和所述对象
B
都有相同的属性和方法，相同的属性包括
path
属性；
[0016]调用模块，供所述对象
B
去调用
render
方法内置的
h
方法，所述
h
方法为
Vue
内置的创建节点的方法，从而使前端界面最终渲染的绑定关系是在所述对象
B
上；
[0017]判断模块，用于在后续的
render
过程中，判断所述对象
B
是否有操作，若是，则直接执行步骤
S5
至步骤
S7
；若否，则等待下一次的
h
调用，即用所述对象
B
去调用
render
方法内置的
h
方法；
[0018]同步模块，用于对所述对象
B
的
path
属性进行监听，当所述对象
B
的
path
属性发生改变，则将所述对象
B
的
path
属性变化同步给所述对象
A
；
[0019]反向深拷贝模块，用于当所述对象
A
的
path
属性变化时，触发通知所述对象
A
反向深拷贝所述对象
B
的所有属性，使所述对象
A
发生更新；...

【技术保护点】

【技术特征摘要】
1.
一种
Vue
组件运行时提升渲染速度的方法，其特征在于：包括下述步骤：步骤
S1、
在
render
方法内，将组件内的属性使用
computed
方法算出结果，记为对象
A
；步骤
S2、
对所述对象
A
执行一次复制了属性和方法的深拷贝，得到对象
B
；此时，所述对象
A
和所述对象
B
都有相同的属性和方法，相同的属性包括
path
属性；步骤
S3、
用所述对象
B
去调用
render
方法内置的
h
方法，所述
h
方法为
Vue
内置的创建节点的方法，从而使前端界面最终渲染的绑定关系是在所述对象
B
上；步骤
S4、
在后续的
render
过程中，判断所述对象
B
是否有更新，若是，则直接执行步骤
S5
至步骤
S7
；若否，说明所述对象
B
没有任何操作，则等待下一次的
h
调用，即用所述对象
B
去调用
render
方法内置的
h
方法；步骤
S5、
对所述对象
B
的
path
属性进行监听，当所述对象
B
的
path
属性发生改变，则将所述对象
B
的
path
属性变化同步给所述对象
A
；步骤
S6、
所述对象
A
的
path
属性变化，触发通知所述对象
A
反向深拷贝所述对象
B
的所有属性，使所述对象
A
发生更新；步骤
S7、
根据
Vue
的双向绑定机制，所述对象
A
的更新引发再次
render
，触发
computed
进行二次计算，
render
方法内置的
h
方法得到一个新的对象
B
，重新渲染，刷新页面
。2.
一种
Vue
组件运行时提...

【专利技术属性】
技术研发人员：刘平，
申请(专利权)人：摩尔元数福建科技有限公司，
类型：发明
国别省市：