What is the best way to structure array elements?

Question

JavaScript

Hello, I want to split large components into smaller ones with smaller dependencies, is there any performance advantage of such a data structure (I currently use it):

items: [
  { type: 'someTypeRequest', ... },
  { type: 'image', ... },
  { type: 'someAnotherTypeRequest2', ... },
  { type: 'video', ... },
]

over this (I think to change to it):

items: {
  requests: [
    { type: 'someTypeRequest1', ... },
    { type: 'someAnotherTypeRequest2', ... },
  ],
  media: [
    { type: 'image', ... },
    { type: 'video', ... }
  ]
  
}

In the first case, I run through 1 large array 1 time and display all the elements:

<template v-for="item in items">
   <component-a v-if="item.type === 'image'"  ...здесь много пропсов></component-a>
   <component-b v-if="item.type === 'video'" ...здесь много пропсов></component-b>
   <component-c v-if="item.type === 'someTypeRequest'" ...здесь много пропсов></component-c>
   <component-d v-if="item.type === 'someAnotherTypeRequest2'" ...здесь много пропсов></component-d>
   ...и ещё компоненты здесь
</template>

and if I need to break a large component (which has a lot of props and more slots) into small child components,
then this becomes painful.
In the second case, I have an object from an array by key that I can sort on the front by purpose (approach 2) and I can at least break it into 2 smaller components: 1) for requests; 2) for media. Are there any drawbacks in the second approach, and does it make sense to leave everything as it is? According to the API, data comes in 1 version.

Answer 1

Instead of a bunch of components with if, use one . <component :is="conponent" v-bind="allprops"/>