• Vue3异步组件

    什么是异步组件

    在传统的 Vue.js 开发中，组件是在应用程序启动时就立即加载的。这种方式虽然简单，但是会导致应用程序的初始加载时间变长，影响用户体验。为了提高应用程序的性能和加载速度，Vue.js 提供了异步组件。

    异步组件是一种延迟加载组件的方式，即只有在需要使用该组件时才会进行加载。

    比如：下面案例中，Home，List，Center是一个需要动态显示的组件，我们在注册这三个组件的时候将他们三个注册为异步组件，当页面第一次加载的时候，就只加载了一个Home组件，其它2个组件则在需要的时候才会加载

    使用案例：

    1. <template>
    2.   <div>
    3.     <Navbar>Navbar>
    4.     <Home v-if="componentName == '首页'">Home>
    5.     <List v-else-if="componentName == '列表'">List>
    6.     <Center v-else-if="componentName == '我的'">Center>
    7.     <Tabbar>Tabbar>
    8.  
    9.   div>
    10. template>
    11. <script>
    12. import { defineAsyncComponent } from "vue";
    13. import store from "./components/store";
    14. import Navbar from "./components/Navbar.vue" //导入Navbar组件模板
    15. import Tabbar from "./components/Tabbar.vue";
    16.  
    17. //异步组件应该在组件注册的时候进行异步导入，所以这里应该注释掉（如果在这里导入则会直接加载这些组件了）
    18. // import Home from "./components/Home.vue";
    19. // import List from "./components/List.vue";
    20. // import Center from "./components/Center.vue";
    21.  
    22.  
    23. export default {
    24.   inheritAttrs: false,
    25.   data() {
    26.     return {
    27.       nvaTitle: "首页",
    28.       componentName: "Home"
    29.     }
    30.   },
    31.   components: {
    32.     Navbar,
    33.     Tabbar,
    34.     Home: defineAsyncComponent(() => import("./components/Home.vue")), //Home组件注册为一个异步组件
    35.     List: defineAsyncComponent(() => import("./components/List.vue")), //List组件注册为一个异步组件
    36.     Center: defineAsyncComponent({                                     //Center组件注册为一个异步组件，我们同时可以对这个异步组件做配置
    37.       // 加载函数
    38.       loader: () => import('./Foo.vue'),
    39.  
    40.       //加载异步组件时使用的组件
    41.       //举列：我们加载组件的时候一般需要一个时间，在这个等待的时间内展示这个LoadingComponent组件（一般是一个精美的转圈动画）
    42.       //用这个LoadingComponent组件首选需要项目中存在这个组件，同时我们需要再