vue.js - 渲染很多组件

Question

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

我不确定这是否是我可以做的事情，但无论如何还是要问。

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

这里我做了一个小的 JsFiddle 这样你就可以尝试一下:https://jsfiddle.net/rt5cjbby/

在家里，使用强大的 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)，尽管维护起来要困难得多。