vue-lazy-render: 耽误衬着大组件，加强页面切换流通度

2019年8月31日 435次阅读 来源: 对角另一面

近来用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

propertydescriptiontypedefaultrequired
time多长时候后最先衬着组件Number10false
immediately是不是立时开启耽误衬着,vue-lazy-render组件会在路由切换时,会举行一次耽误衬着,假如在同一个路由中需常常对某个组件举行耽误衬着,能够将immediately由false设为true,就会立时开启一次耽误衬着Boolean—false
data假如须要耽误加载的组件是由数组衬着的,能够将数据的数据prop进vue-lazy-render组件,组件会依据设置监测数组变化,决议开启耽误加载的机遇array—false
trackByData是不是依据data的变化来开启耽误加载,假如设为true,需将data prop进来,而且路由切换时不会再举行耽误衬着Boolean—false
limit在数据凌驾若干后才开启耽误衬着,须要data和将trackByData设为trueNumber30false
maskClass守候衬着时的遮罩层款式String—false
tip守候衬着时的提醒笔墨String正在衬着,请稍候false

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

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

《vue-lazy-render: 耽误衬着大组件，加强页面切换流通度》

    原文作者：对角另一面
    原文地址: https://segmentfault.com/a/1190000007916197
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞