У меня есть около сотни различных компонентов, представляющих конкретную запись. Эти компоненты отображаются на временной шкале с «загрузкой дополнительных функций». То, что у меня сейчас, выглядит так:

<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ГБ, пока браузер не вылетит.

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

Возможно, есть решения, которые позволят решить эту проблему.

Любой вклад будет очень признателен. Спасибо.

0
CENT1PEDE 12 Окт 2019 в 12:40
Проницательная ветка github.com/vuejs/vue/issues/2000
 – 
CENT1PEDE
15 Окт 2019 в 12:02

3 ответа

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

0
Dr. Shrimp Puerto Rico 12 Окт 2019 в 12:52
1. Да, делаю то, что сначала загружаю только первые 10. 2. Мне нужно добавить данные новой страницы к предыдущей странице, чтобы получить возможность прокрутки. Думаю, основная проблема, которую я хочу здесь затронуть, - это не разбивка на страницы, а отрисовка компонентов в цикле.
 – 
CENT1PEDE
12 Окт 2019 в 13:44
Если это так, то все, что вам нужно сделать, это отправить реквизиты в свой компонент и в свой компонент, когда вы получаете реквизиты, вы должны нажать реквизиты в свой массив данных в вашем локальном компоненте, и он сделает всю работу за вас
 – 
Dr. Shrimp Puerto Rico
12 Окт 2019 в 15:03

Главный компонент

<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 - как отслеживать изменения `props`

0
Dr. Shrimp Puerto Rico 12 Окт 2019 в 15:12

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

0
EderChrono 14 Окт 2019 в 06:40
Спасибо. Также есть github.com/vuejs/vue/issues/2000
 – 
CENT1PEDE
15 Окт 2019 в 12:01