vue-lazy-render: 延迟渲染大组件，增强页面切换流畅度

最近用element来做项目，在开发的过程中，突然发现页面的操作和切换在数据量大的时候相当卡，后来提了个issue,在furybean解答后才知道，我每个单元格都加了tooltip，会生成大量的节点，造成页面操作卡顿。后来将tooltip去掉，操作流畅多了。

但是，由于我是将页面的数据存在vuex中的，在路由切换回来的时候，发现在数据量大的时候，页面渲染得很慢，大概两三秒才能切换过来，用户体验相当不好。

这时，我就在想，能不能让页面切换完成之后才开始渲染数据量大的组件，用户起码不会感知到路由切换的卡顿情况。

一开始不知道怎样做，后来看到这篇blog:vue 性能优化,作者基于vue1.0做了一个指令，基本原理是利用v-if来控制组件的渲染时机。作者在回答中提到vue2.0可以用组件来做，具体的讨论可以看这里

基于此，我做了个组件vue-lazy-render，欢迎star。

基本功能

• 延迟加载组件
• 控制延迟加载的时间
• 可以监控数组的变化和设定数据量来决定是否开启延迟加载

基本用法

默认

<lazy-render>
<my-component></my-component>
</lazy-render>

trackByData

<lazy-render :data="myArray" :time="300" :limit="50" track-by-data>
<my-component :data="myArray"></my-component>
</lazy-render>

源码解释

template

<div class="lazy-load">
<slot v-if="show"></slot>
<div v-if="!show" :class="[maskClass ? maskClass : 'lazy-load-mask']">{{tip}}</div>
</div>

props

methods

/**
* 延迟渲染数据,在数据渲染完成后触发loaded事件
*/
showLazy() {
if ((this.data && this.data.length > this.limit) || !this.data) {  // 如果数据存在并且数据的数量比限定的数量大,则开启延迟渲染 如果不是列表调用组件,也开启延迟渲染
this.syncLoader()
} else {  // 其他情况,不开启延迟渲染
this.show = true
this.$emit('loaded')
}
},
/**
* 延迟渲染
*/
syncLoader() {
this.show = false
setTimeout(() => {
this.show = true
this.$emit('loaded')
},this.time)
}

定义的方法很简单，在data定义的show初始值为false，在需要延迟加载时，会用一个setTimeout来将show设为true，当show变为true时，组件才可以渲染，从而达到延迟渲染的目的。组件开始渲染时，会触发loaded事件。

调用

created() {
this.showLazy()
},
watch: {
data() { // 数据变化时重新渲染
if (this.trackByData) {
this.showLazy()
}
},
// 路由变化,重新渲染
$route() {
if (!this.trackByData) {
this.showLazy()
}
},
// 立即重新变为true时,重新渲染
immediately() {
if (this.immediately) {
this.showLazy()
}
},
},

• 在页面进入时，开启
• 如果不是track-by-data模式，则每次路由切换时，开启
• 如果是track-by-data模式，则数组变化时，开启。由于我的页面中，有些表格是在弹层中展示的，同一个组件，可能每次打开弹层时，数据都不一样，一开始打算用这种方法来实现延迟的，后来加了immediately，感觉这个track-by-data模式完全没有意义了，用了反应会造成不必要的重新渲染。
• 当immediately由false变为true时，开启