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

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?

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

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