时间戳

首页 > 解决方案 > 多个 Vuetify 数据表导致糟糕的性能？

vuetify.js - 多个 Vuetify 数据表导致糟糕的性能？

问题描述

我正在使用 Vuetify 构建 Nuxt 应用程序，并且在使用Vuetify Data Tables时遇到了性能问题。

在页面加载时，我正在查询用户的所有行程。然后，用户可以从侧边栏中选择其中一个行程。我正在测试的示例用户在第一个行程中包含很多类别和项目，而在第二个行程中没有任何内容。当我从第二次点击回到第一次时，加载项目需要几秒钟。

据我所知，这个瓶颈正在发生，因为我正在为每个类别（然后包含多个项目）呈现一个新的数据表。当我查看 Vue Devtools 的 Performance 选项卡时，我注意到即使我禁用了数据表的分页、排序和过滤，所有这些事件仍然被触发。这是屏幕截图：

Vue 开发工具

如您所见，有超过 64 个事件被触发，其中大多数被复制两次，而我认为我已禁用的事件仍在被触发。这是我正在使用的代码的简化版本：

<template>
  <v-data-table
    v-if="category.items"
    :ref="`sortableTable${index}`"
    calculate-widths
    class="items-table-container"
    dense
    disable-filtering
    disable-pagination
    disable-sort
    :footer-props="{ disablePagination: true, disableItemsPerPage: true }"
    :headers="headers"
    hide-default-footer
    :items="category.items"
    :mobile-breakpoint="0">
    <template #body="{ items }">
      <draggable
        v-bind="dragOptions"
        class="dragArea"
        group="items"
        handle=".drag"
        :list="items"
        tag="tbody"
        @change="log"
        @end="drag = false"
        @start="drag = true">
          <tr
            v-for="(item, i) in items"
            :key="item.id">
            
            <!-- Drag Handle -->
            <td
              :key="`${item.id}-drag-${i}-${index}`"
              class="px-0 py-1">
                <custom-icon
                  color="#4a4a4a"
                  custom-class="drag"
                  :height="20"
                  name="grip-horizontal-line"
                  :width="20" />
            </td>

            <!-- Type Click To Edit -->
            <td
              :key="`${item.id}-type-${i}-${index}`"
              class="px-0 py-1">
                <click-to-edit
                  :style="{ fontSize: '0.875rem' }"
                  :unique-identifier="`type${item.id}`"
                  :value="item.generic_type"
                  @handle-update-item="updateItem($event, item, 'generic_type')" />
            </td>

            <!-- Other Columns, shortened to simplify -->
            ...
          </tr>
        </draggable>
      </template>
  </v-data-table>
</template>

目前使用 Vuetify v.2.4.0。

为什么所有这些事件仍在触发？有没有更有效的方法来渲染十几个数据表而不会对性能造成如此巨大的影响？

标签： vuetify.js

解决方案

嗯，我修好了。

我最终使用了 Vuetify 的Lazy Component，因此它不会尝试一次渲染所有 DOM 元素。这加快了我估计的 75%，好多了。不是很好，但更好。这是我植入它的方法：

<template>
  <v-row
    v-for="(category, index) in trip.categories"
    :key="category.id">
    <v-lazy
      min-height="100"
      :options="{ threshold: .25}"
      :style="{ width: '100%' }"
      transition="fade-transition"
      :value="false">
      <v-col
        cols="12">
        <v-data-table
          v-if="category.items"
          :ref="`sortableTable${index}`"
          calculate-widths
          class="items-table-container"
          dense
          disable-filtering
          disable-pagination
          disable-sort
          :footer-props="{ disablePagination: true, disableItemsPerPage: true }"
          :headers="headers"
          hide-default-footer
          :items="category.items"
          :mobile-breakpoint="0">
    
          ... custom rows

        </v-data-table>
      </v-vol>
    </v-lazy>
  </v-row>
</template>

我仍然不确定为什么即使我通过道具禁用分页、排序和过滤事件也会被触发。我感觉它会加快速度，所以如果有人知道答案，我很想听听！

推荐阅读