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

亦凉 2022-07-13 05:07 168阅读 0赞

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

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

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

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

基于此，我做了个组件[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 ###

### props ###

<table> 
 <thead> 
  <tr> 
   <th>property</th> 
   <th align="center">description</th> 
   <th align="center">type</th> 
   <th align="center">default</th> 
   <th align="center">required</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>time</td> 
   <td align="center">多长时间后开始渲染组件</td> 
   <td align="center">Number</td> 
   <td align="center">10</td> 
   <td align="center">false</td> 
  </tr> 
  <tr> 
   <td>immediately</td> 
   <td align="center">是否立即开启延迟渲染,vue-lazy-render组件会在路由切换时,会进行一次延迟渲染,如果在同一个路由中需经常对某个组件进行延迟渲染,可以将immediately由false设为true,就会马上开启一次延迟渲染</td> 
   <td align="center">Boolean</td> 
   <td align="center">–</td> 
   <td align="center">false</td> 
  </tr> 
  <tr> 
   <td>data</td> 
   <td align="center">如果需要延迟加载的组件是由数组渲染的,可以将数据的数据prop进vue-lazy-render组件,组件会根据配置监测数组变化,决定开启延迟加载的时机</td> 
   <td align="center">array</td> 
   <td align="center">–</td> 
   <td align="center">false</td> 
  </tr> 
  <tr> 
   <td>trackByData</td> 
   <td align="center">是否根据data的变化来开启延迟加载,如果设为true,需将data prop进来,并且路由切换时不会再进行延迟渲染</td> 
   <td align="center">Boolean</td> 
   <td align="center">–</td> 
   <td align="center">false</td> 
  </tr> 
  <tr> 
   <td>limit</td> 
   <td align="center">在数据超过多少后才开启延迟渲染,需要data和将trackByData设为true</td> 
   <td align="center">Number</td> 
   <td align="center">30</td> 
   <td align="center">false</td> 
  </tr> 
  <tr> 
   <td>maskClass</td> 
   <td align="center">等待渲染时的遮罩层样式</td> 
   <td align="center">String</td> 
   <td align="center">–</td> 
   <td align="center">false</td> 
  </tr> 
  <tr> 
   <td>tip</td> 
   <td align="center">等待渲染时的提示文字</td> 
   <td align="center">String</td> 
   <td align="center">正在渲染,请稍候</td> 
   <td align="center">false</td> 
  </tr> 
 </tbody> 
</table>

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

最后，所有文章都会同步发送到微信公众号上，欢迎关注,欢迎提意见：

![bVCJ55_w_430_h_430][]

[element]: https://github.com/ElemeFE/element
[issue]: https://github.com/ElemeFE/element/issues/1899
[vue]: https://github.com/Coffcer/Blog/issues/3
[Link 1]: https://github.com/Coffcer/vue-lazy-component/issues/2
[vue-lazy-render]: https://github.com/yeyuqiudeng/vue-lazy-render
[bVCJ55_w_430_h_430]: /images/20220713/21ee88d9a7ae4e3fa4206d62d8fcc1eb.png