VueJs-如何在不占用太多内存的情况下正确循环播放数百个组件？

Question

我有大约一百个不同的组件代表一个特定的记录。这些组件在带有“加载更多功能”的时间轴上显示。我现在所拥有的看起来像这样：

<template>
  <div>
    <template v-for="record in records">
      <record-component-1 v-if="record.type === 'rec1'"></record-component-1>
      <record-component-2 v-if="record.type === 'rec2'"></record-component-2>
      <record-component-3 v-if="record.type === 'rec3'"></record-component-3>
      <!-- so on -->
      <record-component-100 v-if="record.type === 'rec100'"></record-component-100>
    </template>
  </div>
</template>

随着分页的进行，内存消耗也非常快地增加。直至2GB，直到浏览器崩溃为止。

我试图进行一些研究，但找不到与我的设计相似的解决方案。

也许有解决此问题的解决方案。

任何输入将不胜感激。谢谢。

Answer 1

不显示从数据库返回的每条记录，一次仅请求10条，并且不将所有这些记录保存在本地内存中，仅保存当前用户所在的记录，例如如果用户在第10页上，则仅保存该页的记录10，并且如果用户导航到第6页，请请求第6页的记录并将其设置为第10页的记录，则假设您对所有这些记录只有1个分页

Answer 2

主要成分

<childComponent data="this.updatedData"}/>

childComponent.vue

new Vue({
  el: '#app',
  data: {
    localData: []
  },
  components: {
    'childComponent' : {
      template: `<p v-for="item in this.localData">{{ item }}</p>`,
      props: ['data'],
      watch: { 
        data: function(newVal, oldVal) { // watch it
           this.localData.push(newVal)
          console.log('Prop changed: ', newVal, ' | was: ', oldVal)
        }
      }
    }
  }
});

VueJs 2.0 - how to listen for `props` changes