如果我们在单个页面中调用相同的组件，vue 3是否多次加载css？如果不是，它是如何工作的？

Question

我的vue 3组件

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

我想了解，如果链接跟踪组件有css的作用域，那么css将只加载一两次？这实际上是如何编译的？

Answer 1

该CSS将只加载一次，与该组件的JS一样。

您可以拥有页面上每个组件的相同数量的实例，它只需要定义一个一次的。作用域样式或非作用域样式在此上下文中没有区别，Vue将生成相同的散列数据属性，它将应用于组件的每个实例，并将用于对该组件的CSS进行作用域。