V-for с 3000+ записей загружается очень медленно (более 12 секунд)

Question

У меня есть массив из примерно 3000 объектов (из веб-службы), которые я рендерингю с использованием v-for.

мой массив выглядит так:

this.oParts = [
 {
 descript: 'my descript',
 partno: '1234567890123',
 partsid: '1234567890'
 partscatid: '1234567890',
 partscat2id: '1234567890'
 serialized: true,
 category: 'test',
 subcat: 'test-2'
 uofm: ''
 },
.
.
.3000 times
]

Для рендеринга,Я использую vuetifyjs:

<v-container>
   <v-row v-for="(x, index) in oParts" :key="index">
     <v-col>
      <!-- v-model.lazy="x.selected" -->
            <v-checkbox
                  value="false"
                  :label="x.descript + ' (' + x.partno + ')'"
                   :messages="x.partsid + (x.serialized ? ' (serialized)' : '')"
                    class="notes-chkBox"
                    color="primary"
                    @click.capture.stop="btnOKClicked(x)"
                    >
                    </v-checkbox>
              </v-col>
          </v-row>
</v-container>

Это занимает более 12 секунд для загрузки. Я использую Vue.js версии 2.6.10 и vuetify.js версии 2.0.15

Я пытался использовать v-Once, и Object.freeze () упоминал здесь , но это нене похоже, чтобы помочь. Мне действительно не нужно двухстороннее связывание данных здесь. Есть ли другие способы ускорить рендеринг этого списка?

Answer 1

Похоже, что использование виртуального скроллера было подходящим способом. Я нашел этот, разработанный для Vue.js, который занял от 12 секунд до почти мгновенного.

https://github.com/Akryum/vue-virtual-scroller

new html:

<v-container>
<RecycleScroller
   class="scroller"
   :items="oParts"
   :item-size="65"
   key-field="partsid"
   v-slot="{ item }"
   >
   <v-row>
      <v-col>
         <v-checkbox
            value="false"
            :label="item.descript + ' (' + item.partno + ')'"
            :messages="item.partsid + (item.serialized ? ' (serialized)' : '')"
            class="notes-chkBox"
            color="primary"
            @click.capture.stop="btnOKClicked(item)"
            >
         </v-checkbox>
      </v-col>
   </v-row>
</RecycleScroller>  
</v-container>