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>

По мере нумерации страниц потребление памяти также очень быстро растет. До 2 ГБ, пока браузер не падает.

Я пытался провести какое-то исследование, но я не могу найти решение, подобное моему дизайну.

Возможно, существуют решения, которые бы помогли решить проблему такого рода.

Любой вклад будет высоко оценен. Благодаря.

Answer 1

основной компонент

<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 - как прослушивать изменения "реквизита"

Answer 2

Мне кажется, что проблема в том, что вы оцениваете 100 v-if для каждой записи. Почему бы не использовать динамические компоненты для визуализации только необходимого компонента в зависимости от record.type?

Answer 3

не показывает каждую запись, которая возвращается из базы данных, просто запросите 10 раз и не сохраняйте каждую из этих записей в локальной памяти, сохраняйте только те, на которых работает текущий пользователь, например, если пользователь на странице 10 сохраняет записи только длястр. 10, и если пользователь переходит на стр. 6, запрашивает записи для стр. 6 и устанавливает их вместо записей на стр. 10, поскольку у вас есть только одна нумерация страниц для всех этих записей