vue.js - 在 VueJs 中处理大数据

Question

我目前有一个很大的列表，其中包含大约 1k+ 条记录，并且这些记录绑定(bind)到表中。该表还包含用于更新列表数据的输入元素，如文本框、下拉列表。现在的问题显然与列表绑定(bind)到 DOM 时的性能有关，并且在滚动过程中也很缓慢。有什么可以改进的吗？我不想使用分页，也不能使用虚拟滚动，因为我有输入元素，因为它们会触发更新事件。这只是一个例子:

new Vue({
  el: '#app',
  data: {
    bigData: new Array(100000)   
  } 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.js"></script>
<div id="app">
<table>
<thead>
  <tr>
    <td>Id</td>
    <td>Random Text</td>
  </tr>
</thead>
<tbody>
  <tr v-for="(item, index) in bigData">
    <td>{{ index }}</td>
    <td><input type="text" v-model="index"><td>
  </tr>
</tbody>
</table>
</div>

Answer 1

我也遇到过类似的问题，经过大量测试，我得出的结论是将页面与过滤器结合使用是最好的。 (我有 5*100 个输入。)

问题是您的浏览器开始滞后，因为要解析的 JS 和 HTMl 变得太多了。