CODEWITHSUNDEEP
vue.jsmemory-managementvuejs2components
jofftiquez
jofftiquez

Reputation: 7708

VueJs - How to properly loop over hundreds of components without consuming too much memory?

I have around a hundred different components representing a specific record. These components are being displayed on a timeline with "load more functionality". What I have right now looks like this:

<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>

As the pagination goes, the memory consumption is also going up very fast. Up to 2GB until the browser crashes.

I tried to do some research but I can't find a solution that's similar from my design.

Perhaps there are solutions that would cater this kind of problem.

Any input would be much appreciated. Thanks.

Upvotes: 0

Views: 463

Answers (3)

Eder D&#237;az
Eder D&#237;az

Reputation: 2071

It seems to me that the problem is that you are evaluating 100 v-if's for each record. Why not use dynamic components to render only the component you need depending on the record.type?

Upvotes: 1

Dr. Shrimp Puerto Rico
Dr. Shrimp Puerto Rico

Reputation: 51

main component 

<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

Upvotes: 0

Dr. Shrimp Puerto Rico
Dr. Shrimp Puerto Rico

Reputation: 51

don't show every record that comes back from database just request like 10 a time and dont save every of those records on local memory only save those that the current user is on like if user is on page 10 only save records for page 10 and if user navigate to page 6 request records for page 6 and set them in place of page 10 records asumming u have only 1 pagination for all those records

Upvotes: 0

Related Questions