Mi vue 3 componente
<script setup lang="ts"> import { defineAsyncComponent, ref, Ref } from "vue"; import CookiesHelper from "@/utilities/cookies"; import { Banner as BannerType } from "@/interfaces/Banner"; import { usePackageStore } from "@/store/offers-package"; import { useInitDataStore } from "@/store/init-data"; import useGroupedData from "@/composables/grouped-data"; CookiesHelper.setCookies(); const isLoaded = ref(false); const dataStore = usePackageStore(); const initDataStore = useInitDataStore(); let selectedApp: unknown; switch (initDataStore.app) { case "app1": selectedApp = defineAsyncComponent(() => import("@/pages/app1.vue")); break; default: selectedApp = defineAsyncComponent(() => import("@/pages/app2.vue")); } dataStore .setDataPackage() .then(() => { isLoaded.value = true; }) .catch((e: Error) => { console.log(e); }); </script> <template> <div v-show="isLoaded"> <component :is="selectedApp"></component> <link-tracking></link-tracking> <link-tracking></link-tracking> </div> </template> <style lang="scss"> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>Quiero entender, si el componente de seguimiento de enlaces tiene css con alcance, ¿entonces ese css se cargará solo una o dos veces? ¿Cómo se compila esto realmente?
Ese CSS se cargará solo una vez, así como JS para ese componente.
Puede tener tantas instancias de cada componente en la página, solo necesita definirse una vez . Los estilos con alcance o sin alcance no hacen ninguna diferencia en este contexto, Vue generará el mismo atributo de datos hash que se aplicará a cada instancia de un componente y se utilizará para el alcance de CSS a ese componente.