Как лучше структурировать элементы массива?

Question

[Роман]

Привет, хочу разбить большие компоненты на маленькие с меньшими зависимостьями, есть ли приемущество такой структуры данных(в данный момент использвую её)в производительности:

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

над этой(думаю сменить на неё):

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

В первом случае 1 раз пробегаюсь по 1 большому массиву и вывожу все элементы:

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

и если мне надо разбить большой компонент(в котором прокидается много пропсов и есть ещё слоты) на малые дочерние компоненты,
то это стаёт болезненным.
Во втором случае у меня есть обьект с массива по ключу которые я могу на фронте посортировать по предназначению (2 подход) и я смогу это хотябы разбить на 2 меньших компонента: 1) для requests; 2) для media. Есть ли во втором подходе недостатки и какие либо есть смысл оставить всё как есть? По API данные приходят в 1 варианте.

Answer 1

[Aetae]

Вместо кучи компонентов с if, используй один <component :is="conponent" v-bind="allprops"/>.

Comments

[Роман]

не совсем понимаю что вы имеете ввиду, но у меня там в компоненты передаются разные вложенные и не вложенные пропсы с событиями и дизайн там сильно отличается + там есть свои модальные окна например для удаления элементов с другими зависимостьями..

[Aetae]

Роман, заранее через computed подготавливаете нужные пропсы и компонеты:

computed: {
  preparedItems() {
    return this.items.map(item => {
      // ...
      return {
        key: ...,
        component: ...,
        props: { ... }
      }
    })
  }
}

И дальше в разметке просто пишете:

<component 
  v-for="{key, conponent, props} in preparedItems"
  :key="key" 
  :is="conponent" 
  v-bind="props"
/>

[Роман]

Aetae а как быть из слотами и например

<slot><button @click="handler(item.id)">Кнопка</button></slot>

для каждого компонента другой и при этом ещё с обработчиками?

[Aetae]

Роман, сделать компоненты-обёртки под каждый type, где заранее всё это разложить как надо.
Если у всех этих компонентов есть что-то общее, но настраиваемое по разному для каждого - привести обёртки к более-менее общему интерфейсу.

P.S. Обработчики скопом присваиваются как v-on="listeners".

[Роман]

Aetae, спасибо, буду разбираться