vue.js - 渲染大量组件

Question

我正在尝试使用 VueJS 制作一个小型应用程序，但我遇到了一些性能问题。

我不确定这是我可以做的事情，但还是要问。

我的目标是渲染大量组件(同时渲染超过 10,000 个)。但是 Vue 渲染这些组件和更新 dom 所花费的时间相当长。

我在这里做了一个小的 JsFiddle，所以你可以在你这边试试:https://jsfiddle.net/rt5cjbby/

在家里，使用 badass i7 处理器，渲染需要 400 毫秒。也就是说，当您使用更多组件进行测试时，会更多。

我的问题是:有什么技巧可以让我获得更好的表现吗？

是否可以每渲染 100 个组件更新一次 DOM？客户端可以很快看到前 100 个组件，然后浏览器将继续呈现....

如果您不想打开 jsFiddle，这是我的示例代码:

some_table = []

for (let i = 0; i < 2000; i++) {
    some_table.push({
    foo: 'bar'
  })
}

let someComponent = Vue.extend({
  template: '#some-component',
  props: ['input']
})

new Vue({
  el: '#app',
  data: {
    lines: some_table
  },
  components: {
    someComponent
  }
})

还有我的模板:

<div id="app">
  <div  v-for="line in lines">
    <some-component :input="line"></some-component>
  </div>
</div>

<template id="some-component">
  <div>
    {{ input.foo }}
  </div>
</template>

当然，我可以每 0.01 秒填充一次表格，但我认为这不是最佳解决方案。

PS:我接受像“[Angular|React] 更适合你的用例因为 ......”这样的回复

非常感谢您的帮助/经验/建议，祝您有愉快的一天

Answer 1

如果您只对渲染组件的最终结果感兴趣，您可以利用 render function 轻松实现出色的性能。 .

这是一个完整的工作 Fiddle以下:

模板:

<div id="app"></div>

Javascript:

some_table = []

for (let i = 0; i < 10000; i++) {
  some_table.push({
    foo: 'bar'
  })
}

new Vue({
  el: '#app',
  data: {
    lines: some_table
  },
  render: function (createElement) {
    if (this.lines.length) {
      return createElement('div', this.lines.map(function (line) {
        return createElement('div', line.foo)
      }))
    } else {
      return createElement('p', 'No items found.')
    }
  }
})

setTimeout(() => {
  for (let i = 0; i < 10; i++) {
    some_table.unshift({
      foo: 'bar stool'
    })
  }
}, 2500)

在此示例中，几乎立即渲染了 10,000 个“单元格”(在我的机器上进行分析时大约需要 450 毫秒)。延迟 2.5 秒后，还会添加另外 10 条新记录，因为渲染函数将响应数组的更改。这允许您根据需要通过修改源数组来更改渲染状态。

请注意，您仍然可以通过渲染函数中您自己的 v-model 实现执行复杂的双向数据绑定(bind)，尽管维护起来要困难得多。