如果我们在单个页面中调用同一个组件，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>

我想了解，如果 link-tracking 组件的作用域为 css，那么 css 将只加载一次或两次？这实际上是如何编译的？

Answer 1

CSS 和该组件的 JS 一样只加载一次。

页面上的每个组件可以有任意多个实例，只需定义一次。范围样式或非范围样式在这种情况下没有区别，Vue 将生成相同的散列数据属性，它将应用于组件的每个实例，并将用于范围 CSS 到该组件。

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

Does vue 3 loads css multiple times if we call same component in single page? If not how does it work?

javascript

typescript

vuejs3