He visto algunas preguntas en stackoverflow sobre ese tema, pero en realidad nunca mencionaron actuaciones.

Digamos que tengo una página HTML con una lista de Tienda, esta lista HTML es generada por el servidor en la página HTML.

Me gustaría que cada "bloque" de Shop HTML muestre un componente Vue JS <Calendar />

html:

 <div class="list"> <div class="shop"> <div> <div> <div> <div> <div class="component-placeholder" data-shop-id="x"></div> .... </div> <div class="shop"> <div> <div> <div> <div> <div class="component-placeholder" data-shop-id="x"></div> .... </div> ... </div>

Para JS hay 2 posibilidades.

Opción 1 :

 document.querySelectorAll('.component-placeholder').forEach((item) => { const shopId = item.getAttribute('data-shop-id'); new Vue({ render: (h) => h(Calendar, { props: { shopId, }, }), }).$mount(item); });

Opcion 2 :

 const elem = document.querySelector('.list'); new Vue({ el: elem, components: { Calendar }, }); // for this I would replace the component-placeholder with <Calendar shop-id="x" /> in the HTML

Mi pregunta es, ¿cuál es la mejor práctica cuando se centra en el rendimiento?

Si la lista tiene 30 Tiendas, la Option 1 crearía 30 instancias de Vue viviendo juntas, pero la Option 2 también necesitaría agregar y crear todos los elementos HTML dentro de su shadow DOM cuando el componente se carga por primera vez, ¿no?