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：我接受像＆＃34; [Angular | React]这样的回答更适合您的用例因为 ....＆＃34;

非常感谢您的帮助/经验/建议并度过愉快的一天

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＆＃34; cell＆＃34;几乎立即呈现（在我的机器上进行分析时约为450毫秒）。在2.5秒延迟之后，还会添加另外10条新记录，因为渲染功能将响应对阵列的更改。这允许您通过修改源数组来根据需要更改呈现状态。

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

渲染大量组件

1 个答案: