Vue.js 中大表的性能问题

Question

作为学习练习，我一直在调整现有的、可运行的 Web 应用程序以使用 Vue.js（我对另一个项目感兴趣的技术）。我只是想知道在处理大表（例如 1000-1500 行）方面是否有一些我需要了解的提示和技巧。

在我现有的 Web 应用程序中，我只是循环遍历产品的 Javascript 数组，通过字符串连接为表体构建 HTML，然后通过 JQuery 将其插入到空表中。这在性能方面工作得很好，当然它看起来有点凌乱并且可维护性不是很好。

对于我的 Vue.js 版本，我改为使用模板块，即：

<template v-for="product in productList">

生成的 HTML 看起来是相同的。但是由于某种原因，Vue.js 版本的响应有点迟钝。例如，当我单击其中一个产品行中的选择时，需要半秒钟左右的时间才会出现选项，并且选择了一个后，更新行类也有类似的延迟。

由于各种原因，我无法将实际的源代码放在像 Fiddle 这样的东西上，尽管我正在尝试创建一个简化的可重现示例。不过，我只是想知道 Vue 管理的表和直接的 HTML 表之间可能有什么区别，以便我可以了解导致这种意外缓慢的原因。

哦，如果您认为拥有这么多行的表格是个坏主意，那么这适用于具有已知的、经过测试的客户端的内部 Web 应用程序，并且纯 HTML 版本的性能很好。

Answer 1

是的，这通常是VueMVVM 库的一个缺点。什么Vue实际上做的是在循环中的每一个项目建立一个新的Vue实例，并绑定到这将会减慢，但呈现加速更新数据。不幸的是，似乎没有办法v-for更快，所以你必须解决它，请参阅这个问题：https : //github.com/vuejs/vue/issues/2000

Answer 2

对于我的情况，我只需稍微延迟我的列渲染，性能就会大大提高。

假设您正在执行v-foron columns: [...]，只需创建一个displayedColumns: [] 来替换它并mounted添加

this.columns.forEach((c, i) =>
  setTimeout(() => this.displayedColumns.push(c), i * 200),
)

最好为每次迭代进行异步睡眠，而不是创建几次超时，但您明白了。