在 vue/nuxt 中获取和渲染大型数据集时性能缓慢

Question

好的，我的情况如下...我必须根据 axios 获取的项目在 vue 中呈现一个列表。每个项目都有一个 ID、一个代码（字符串）和一个描述，我在系统的数据库中有 14.000+ 个这些项目 (mysql)。此外，这些项目分为 119 个类别，这些类别也有代码和描述（某些类别的项目比其他类别多）。我的工作是显示这些类别的列表，每次有人点击一个类别时，它都会折叠以显示该类别的项目列表。

我目前的解决方案：每当有人点击一个类别时，系统都会发出一个 axios get 请求来获取该类别的项目（它 returns 一个对象数组）然后我使用 [=21= 渲染它们]v-for。为了获取正确的项目，我使用 knex（nodejs 后端）构建了一个特定的查询。问题是当我点击一个有很多项目的类别或者如果我点击很多类别有点快时，网站会变得非常慢，有时甚至会完全停止。所以我想知道在 vue 中呈现长列表的正确和优化方法是什么。

我的 axios 请求代码：

getCategoryItems(index) {
  this.isOpen = index
  this.loading()
  const cat = this.categories[index].code

  this.$axios
    .get('/api/items', {
      params: {
        category: cat
      }
    })
    .then(response => {
      this.categoryItems = response.data
    })
    .catch(error => {
      console.log(error)
    })
}

我用于呈现列表的代码（我使用的是 buefy）：

<section ref="modalContent" class="modal-card-body">
    <b-collapse
      v-for="(category, index) of categories"
      :key="index"
      :open="isOpen == index"
      @open="getCategoryItems(index)"
      class="card"
      animation="slide"
    >
      <template #trigger="props">
        <div class="card-header" role="button">
          <p class="card-header-title">
            {{ category.description }}
          </p>
          <a class="card-header-icon">
            <b-icon :icon="props.open ? 'menu-down' : 'menu-up'"> </b-icon>
          </a>
        </div>
      </template>
      <div class="card-content">
        <div ref="content" class="content">
          <div v-for="item in categoryItems" :key="item.id" class="category-item">
            <b-icon icon="book-plus" size="is-small"> </b-icon>
            <a @click="selectedItem(item)" class="category-item-title">
              {{ item.description }}
            </a>
          </div>
          <b-loading :is-full-page="false" v-model="isLoading"></b-loading>
        </div>
      </div>
    </b-collapse>
  </section>

Answer 1

老实说，这里没有正确答案：

You should paginate the results

What is pagination（假设您使用的是 REST API）

如果您真的想呈现所有这些结果，您仍然可以选择使用 virtual scrollers。虚拟滚动器允许您呈现数百万条记录，而无需在 DOM.

中一次呈现所有记录

如何使用虚拟滚动条超出了本答案的范围。欢迎查看我发给你的link

在 vue/nuxt 中获取和渲染大型数据集时性能缓慢

Slow performance when fetching and rendering large dataset in vue/nuxt

large-data

node.js

vue.js

axios