Vue3异步组件 - 技术栈

什么是异步组件

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

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

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

使用案例：

html 复制代码

<template>
  <div>
    <Navbar></Navbar>
    <Home v-if="componentName == '首页'"></Home>
    <List v-else-if="componentName == '列表'"></List>
    <Center v-else-if="componentName == '我的'"></Center>
    <Tabbar></Tabbar>

  </div>
</template>
<script>
import { defineAsyncComponent } from "vue";
import store from "./components/store";
import Navbar from "./components/Navbar.vue" //导入Navbar组件模板
import Tabbar from "./components/Tabbar.vue";

//异步组件应该在组件注册的时候进行异步导入，所以这里应该注释掉（如果在这里导入则会直接加载这些组件了）
// import Home from "./components/Home.vue";
// import List from "./components/List.vue";
// import Center from "./components/Center.vue";


export default {
  inheritAttrs: false,
  data() {
    return {
      nvaTitle: "首页",
      componentName: "Home"
    }
  },
  components: {
    Navbar,
    Tabbar,
    Home: defineAsyncComponent(() => import("./components/Home.vue")), //Home组件注册为一个异步组件
    List: defineAsyncComponent(() => import("./components/List.vue")), //List组件注册为一个异步组件
    Center: defineAsyncComponent({                                     //Center组件注册为一个异步组件，我们同时可以对这个异步组件做配置
      // 加载函数
      loader: () => import('./Foo.vue'),

      //加载异步组件时使用的组件
      //举列：我们加载组件的时候一般需要一个时间，在这个等待的时间内展示这个LoadingComponent组件（一般是一个精美的转圈动画）
      //用这个LoadingComponent组件首选需要项目中存在这个组件，同时我们需要再<script>中导入这个组件,如：import LoadingComponent from "./components/LoadingComponent.vue"
      loadingComponent: LoadingComponent,

      // 展示加载组件前的延迟时间，默认为 200ms 
      delay: 200,

      //加载失败后展示的组件
      //用这个ErrorComponent组件首选需要项目中存在这个组件，同时我们需要再<script>中导入这个组件,如：import LoadingComponent from "./components/LoadingComponent.vue"
      errorComponent: ErrorComponent, 
      // 如果提供了一个 timeout 时间限制，并超时了也会显示这里配置的报错组件，默认值是：Infinity 
      // 举列：如果在加载这个组件因为网络慢的原因导致组件加载的时间超过了timeout定义的超时时间，则会在页面展示ErrorComponent组件)
      timeout: 3000 
    }),
    
  },
  provide() {
    return {
      app: this, //向外提供一个值,这个值的名称是我们自己定义的，this表示当前根组件对象（可以供其他组件可以直接获取到）
    }
  },
  mounted() { //钩子函数，项目已启动则订阅
    var obj = {
      "我的": "Center",
      "列表": "List",
      "首页": "Home"
    }
    //订阅
    store.subscribe((name) => { //参数name传递的值其实就是"我的"，"列表"，"首页"
      this.componentName = obj[name] //如果name是"我的"，那么obj[name] 的值就是Home，
    })
  }
}
</script>

全局注册异步组件

上面是局部注册异步组件，当然我们也可以全局注册异步组件：如下

javascript 复制代码

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
)