Javascript VueJS，Vuetify，数据表-可扩展，性能问题

我的VueJS和Vuetify项目有问题。 我想创建一个具有可扩展行的表。这将是一个订单表，每个订单都有可能看到购买的产品。对于一个页面，它应该显示至少100行订单。 为此，我使用了Vuetify框架中的

---

有什么问题？ 在准备了所有的东西之后，我意识到它是有效的，但是对于每一行的扩展，我必须等待几秒钟（太长了，它一定是一个快速的系统）。为了扩展所有可见的记录，需要等待20秒以上，整个页面延迟

---

我试过什么？ 我从标准Vuetify

开始，使用了一个

show expand

道具和一个

展开项目

槽-这是我第一次尝试-最慢的。 第二，我尝试自己创作——但使用Vuetify：

展开/隐藏

有趣的是-我意识到

v-if

比

v-show

工作得更快，这是一个奇怪的事实，因为我认为将

display:none

更改为nothing应该比将整个对象添加/删除到DOM问题更小

这个方法比第一个快一点，但仍然太慢

我在我的表格中找到了为每个

v-btn

设置

：ripple=“false”

的提示，我这样做了-有帮助，但只是一点点。 一切都在Chrome和Firefox上进行了测试，在三台装有Windows和Linux Fedora的设备以及两台android智能手机上进行了测试

---

我还能做什么

提前谢谢你

。也就是说，在我为了解更多关于您的问题而构建的示例应用程序中，我没有遇到任何真正的性能瓶颈。整个页面的表加载时间约为1.25s（从localhost），无论它是在开发模式下还是在生产构建中。JavaScript报告说，同时扩展或收缩所有100行平均只需要0.3秒。总之，我认为您可以实现所需的优化，而不必放弃Vuetify的便利性

建议

考虑一次显示更少的行（最大的预期影响）

简化模板以使用尽可能少的元素，只显示用户真正需要的数据。您真的需要

v-data-table

内的

v-data-table

简化数据模型，只检索显示表所需的最少数据。正如@codeplayer所建议的，数据的大小和复杂性可能导致这种压力

测试方法 这就是我所做的。我创建了一个简单的Vue/Vuetify应用程序，它有一个

VDataTable

，有100个可扩展行。（数据是从中提取的）。我过去常常计算DOM节点。以下是一些参数/信息：

• 行数：100
• 列：5+扩展开关
• 扩展行内容：带有用户图片和地址的

  VSimpleTable

• 从API返回的单个JSON记录的大小：~62行（大约是上面示例对象大小的一半）
• Vue v2.6.11
• Vuetify v2.3.0-beta.0
  （我意识到这一点刚刚出现，但我认为使用v2.2.x不会有不同的结果）
• 应用程序是使用

  vue create myapp

  和

  vue add vuetify

• VDataTable

  实际上，每当扩展/收缩行时，都会从DOM中添加/删除扩展行

下面是一些关于结果的近似统计数据（这些数字在不同的条件下略有波动——YMMV）：

• 773（~7/行）：未启用扩展的100行/5列中的DOM节点数
• 977（+2/行）：启用扩展的节点数
• 24：通过展开单个行添加到表中的节点数
• 3378（+26/行）：展开所有行的节点总数
• ~1.25s以在硬刷新时加载整个页面
• ~0.3以同时扩展或收缩所有节点
• 使用内置的排序工具对列进行排序既快捷又实用

这是我的应用程序的

App.vue

页面的代码。

v-data-table

几乎是页面上唯一的组件（除了切换按钮），我没有导入任何外部组件

切换“全部展开”
{{name.first}{{name.last}}
名称
{{person.name.title}。{{person.name.first}{{person.name.last}}
地址
{{person.location.street.number}{{person.location.street.name}}

{{person.location.city}，{{person.location.state}{{person.location.postcode}
出生日期
{（新日期（person.dob.Date））.toLocaleDateString（）}（年龄{person.dob.age}）
从“axios”导入axios
导出默认值{
名称：“应用程序”，
数据：（）=>({
扩展：[]，
标题：[
{text:'Name'，value:'Name'}，
{文本：“性别”，值：“性别”}，
{文本：'Phone'，值：'Phone'}，
{text:'Cell'，value:'Cell'}，
{text:'Country'，value:'nat'}，
{文本：“”，值：'数据表