渲染很多组件

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 实现来执行复杂的 2 路数据绑定，尽管维护起来要困难得多。