Usamos el estilo con ámbito en el componente en Vue y tiene ventajas. Pero supongamos que tengo un componente como BoxComponent.vue y defino una clase.
<style scoped> .box-component{ float: left; flex-grow: initial !important; margin: 0 3px; } </style> Creo que podría ser bueno usar esto en una o dos veces, pero cuando lo uso en un bucle, quizás cientos de bucles, generará clases de estilo independientes porque vue-loader tratará cada elemento de manera diferente.
En ese caso, creo que podría ser un problema en términos de velocidad y uso de memoria. ¿Alguien puede elaborar esto por favor? ¿Cuándo es bueno usar el estilo de alcance o el estilo global en Vue.js?
En mi opinión, la pregunta debería ser más una
¿Necesito que mi estilo sea global aquí o no?
que uno de rendimiento. Diría que en general no tiene sentido, especialmente si usa un marco de utilidad (como Tailwind). El hecho es que obtendrá menos redefiniciones de CSS en todas sus páginas.
Elegir cómo escribes tu CSS y también qué usas exactamente, tendrá un mayor impacto que determinar o no el alcance. Dale una lectura a las herramientas súper ligeras como UnoCSS si estás interesado en mantener algo súper delgado.
Además, obtendrá mucho más rendimiento con scripts de terceros como GTM, un widget de chat o lo que sea que su empresa le obligue a agregar de todos modos.
No creo que el CSS en tiempo de ejecución obtenga un rendimiento deficiente, simplemente no use selectores súper genéricos como * o div en su sitio web y debería estar bien.
Aún así, si tiene un sitio web súper grande, sería bueno intentar comparar todo de alguna manera al verificar el tiempo total de procesamiento (manteniéndose enfocado en los indicadores de estilo, por supuesto): https://developer.chrome.com/docs /devtools/evaluar-rendimiento/
Fuente oficial: https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements