vuelazyrender:耽误衬着大组件，加强页面切换流通度

近来用element来做项目，在开辟的过程当中，倏忽发明页面的操纵和切换在数据量大的时刻相称卡，厥后提了个issue,在furybean解答后才晓得，我每一个单元格都加了tooltip，会生成大批的节点，形成页面操纵卡顿。厥后将tooltip去掉，操纵流通多了。

然则，因为我是将页面的数据存在vuex中的，在路由切换返来的时刻，发明在数据量大的时刻，页面衬着得很慢，也许两三秒才切换过来，用户体验相称不好。

这时候，我就在想，能不能让页面切换完成以后才最先衬着数据量大的组件，用户最少不会感知到路由切换的卡顿状况。

一最先不晓得如何做，厥后看到这篇blog:vue 机能优化,作者基于vue1.0做了一个指令，基础原理是应用v-if来掌握组件的衬着机遇。作者在回复中提到vue2.0能够用组件来做，详细的议论能够看这里

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

基础功能

• 耽误加载组件

• 掌握耽误加载的时候

• 能够监控数组的变化和设定数据量来决议是不是开启耽误加载

基础用法

默许

trackByData

源码诠释

template

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时，开启

末了，一切文章都邑同步发送到微信民众号上，迎接关注,迎接提意见：