多个 Vuetify 数据表导致糟糕的性能？答案

【问题标题】：Multiple Vuetify Data Tables causing terrible performance?多个 Vuetify 数据表导致糟糕的性能？
【发布时间】：2021-04-05 14:39:18
【问题描述】：

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

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

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

如您所见，有超过 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。

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

【问题讨论】：

你在 chrome 或 firefox 上测试过 vue 性能吗？我有类似的问题性能虎钳（虽然不是来自数据表），我在 Firefox 中进行测试并且应用程序急剧变慢，尝试了一些没有运气的解决方案，然后意外地在 chrome 中测试了应用程序，一切正常！
这很有趣。不过我目前正在使用 Chrome。

标签： vuetify.js

【解决方案1】：

嗯，我有点修复了它。

我最终使用了 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>

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

【讨论】：