掌握Vue虚拟列表的秘诀：高度、缓冲、异步加载解析

2023-12-20 06:44:57

在浩瀚的数据洪流中，虚拟列表犹如一艘轻盈小艇，载着我们穿梭于数据海洋，尽情领略信息之美。但在实际应用中，虚拟列表也面临着诸多挑战，例如不定高度元素的高度获取、滚动时的白屏闪烁、异步加载数据的处理以及一次性请求大量数据的合理性等。本文将深入解析这些问题，助你化解困局，打造顺畅如丝的虚拟列表体验。

动态高度的奥秘

当列表元素高度不定时，虚拟列表如何准确获取元素高度呢？秘诀在于"offsetHeight"属性。通过为每个列表元素添加一个占位符元素，并在元素加载完成后使用"offsetHeight"属性获取真实高度，虚拟列表便可精准掌握元素的高度。

缓冲的魔法

滚动时，列表元素的不断加载可能会导致白屏闪烁。缓冲机制应运而生，它在列表顶部和底部预留了一定数量的额外元素。当用户滚动时，这些缓冲元素提前加载完毕，有效避免了白屏闪烁的尴尬。

异步加载的舞步

异步加载异步加载可以有效提升性能，但如何与虚拟列表结合呢？关键在于监听异步加载数据的变化，并动态更新虚拟列表的数据源。通过使用"Vue.nextTick"，可以在异步数据加载完成后触发虚拟列表的重新渲染，实现无缝衔接。

请求数据的权衡

一次性请求大量数据虽然可以减少请求次数，但也会占用大量的带宽，甚至导致浏览器崩溃。因此，需要权衡数据请求量和用户体验之间的平衡。一种可行的方案是按需加载，即只加载当前视口范围内的数据，滚动时再逐步加载更多数据。

示例代码大放送

获取动态高度

mounted() {
  this.$nextTick(() => {
    this.heights = this.$refs.list.children.map(child => child.offsetHeight);
  });
}

缓冲预加载

data() {
  return {
    buffer: 10, // 预加载缓冲数量
  };
}

异步加载数据

asyncData({ store }) {
  const data = await axios.get('/api/data');
  store.dispatch('setData', data.data);
}

按需加载数据

methods: {
  loadMoreData() {
    if (this.isLoading || this.isLastPage) return;
    this.isLoading = true;
    axios.get('/api/data?page=' + this.currentPage)
      .then(res => {
        this.isLoading = false;
        this.currentPage++;
        this.data.push(...res.data.data);
      });
  }
}