如何让vue长列表快速加载

下面是关于如何让 Vue 长列表快速加载的完整攻略：

1. 为什么要快速加载长列表？

Vue 作为一种前端框架，使用其开发的应用在引入大量数据时可能会出现渲染速度慢、页面卡顿等问题，导致用户体验降低。因此需要在长列表的数据渲染过程中尽可能提高渲染效率和响应速度。

2. 进一步细分问题

如何在 Vue 中快速加载长列表的数据渲染并达到较好的用户体验，具体的解决方法可以细分如下：

• 仅渲染可见区域内的数据：长列表中很多数据是不可见的，只有在滚动到对应位置时才会被渲染，因此只需要渲染可见区域内的数据可以提高渲染效率。
• 利用虚拟滚动技术：虚拟滚动是指只渲染可视区域内的视图元素，当滚动位置改变时，只改变列表容器中元素属性，而不重新创建元素。这可以通过一些优秀的库和组件来实现。
• 对于简单列表可以使用第三方组件来提高渲染速度：例如 vue-virtual-scroller、vue-lazy-load 等。

3. 如何实现

只渲染可见区域内的数据

在 Vue 中只渲染可见区域内的数据可以通过以下方式实现：

<template>
  <div class="list">
    <div v-for="(item, index) in visibleData" :key="index" class="item">{{ item }}</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        data: [],
        visibleData: [],
        rangeTop: 0,
        rangeBottom: 0,
      };
    },

    mounted() {
      window.addEventListener('scroll', this.onScrollHandler);
    },

    destroyed() {
      window.removeEventListener('scroll', this.onScrollHandler);
    },

    methods: {
      onScrollHandler() {
        const list = this.$el.querySelector('.list');
        const { scrollTop, offsetHeight } = list;
        const rangeTop = scrollTop - 100;
        const rangeBottom = scrollTop + offsetHeight + 100;
        this.visibleData = this.data.filter((item, index) => (index >= rangeTop && index <= rangeBottom));
      },
    },
  };
</script>

可以在 mounted 钩子函数中添加 window 的滚动监听，在这个回调函数里，首先获取当前可视区域的起止位置，然后根据起止位置利用 Array.prototype.filter() 进行数据的筛选，最后得到可见的数据。这样就可以只渲染可见区域内的数据。

利用虚拟滚动技术

Vue 中利用虚拟滚动技术可以通过以下几种方式实现：

2.1 vue-virtual-scroller

vue-virtual-scroller 是一个基于 Vue 的虚拟滚动库，可以提供较好的滚动技术。

<template>
  <div class="container">
    <div v-virtual-scroll="data" class="list-item" :key="'item'+index" slot-scope="{ item }">{{ item }}</div>
  </div>
</template>

<script>
  import VirtualScroller from 'vue-virtual-scroller';
  import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';

  export default {
    components: { VirtualScroller },
    data() {
      return {
        data: [],
      };
    },

    methods: {
      loadMore() {
        // 加载更多数据的方法
      },
    },
  };
</script>

可以利用 VirtualScroller 组件来实现长列表的虚拟滚动，在模板中使用 v-virtual-scroll 指令图表需要进行虚拟滚动的数据，同时也可以自定义滚动单元元素的样式。另外，可以在 loadMore 方法中实现数据的懒加载和下拉刷新等操作。

2.2 vue-lazyload

vue-lazyload 是用于 Vue 的图片懒加载的组件，也可以通过它来实现长列表的虚拟滚动。

<template>
  <div class="container">
    <div v-for="(item, index) in data" :key="'item'+index" class="list-item">
      <img v-lazy="item">
      <div>{{ item }}</div>
    </div>
  </div>
</template>

<script>
  import VueLazyload from 'vue-lazyload';

  export default {
    components: { VueLazyload },
    data() {
      return {
        data: [],
      };
    },

    mounted() {
      this.$refs.scrollContainer.addEventListener('scroll', this.onScrollHandler);
    },

    destroyed() {
      this.$refs.scrollContainer.removeEventListener('scroll', this.onScrollHandler);
    },

    methods: {
      onScrollHandler() {
        this.$lazyload.$on('loaded', () => {
          this.$nextTick(() => {
            this.$forceUpdate();
          });
        });
      },
    },
  };
</script>

可以在模板里使用 v-for 循环渲染长列表，每个列表项当中的图片使用 v-lazy 进行懒加载。可以利用 this.$refs.scrollContainer 获取滚动容器，通过监听 scroll 事件实现滚动时的懒加载。另外还需要调用 $nextTick 和 $forceUpdate 方法来使得组件能够及时显示新渲染出来的数据。

4. 总结

使用以上实现方式，不仅可以让 Vue 程序支持运行大型数据渲染，而且还可以保证其运行速度的优劣。不过当然可根据具体的业务需求进行选择，确定采用何种方案。