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')
)
相关推荐
码力码力我爱你10 分钟前
QT + WebAssembly + Vue环境搭建
vue.js·vue·wasm·webassembly·emscripten
qbbmnnnnnn13 分钟前
【CSS Tricks】如何做一个粒子效果的logo
前端·css
唐家小妹14 分钟前
【flex-grow】计算 flex弹性盒子的子元素的宽度大小
前端·javascript·css·html
涔溪16 分钟前
uni-app环境搭建
前端·uni-app
安冬的码畜日常20 分钟前
【CSS in Depth 2 精译_032】5.4 Grid 网格布局的显示网格与隐式网格(上)
前端·css·css3·html5·网格布局·grid布局·css网格布局
洛千陨20 分钟前
element-plus弹窗内分页表格保留勾选项
前端·javascript·vue.js
小小199222 分钟前
elementui 单元格添加样式的两种方法
前端·javascript·elementui
完球了41 分钟前
【Day02-JS+Vue+Ajax】
javascript·vue.js·笔记·学习·ajax
前端没钱42 分钟前
若依Nodejs后台、实现90%以上接口,附体验地址、源码、拓展特色功能
前端·javascript·vue.js·node.js
爱喝水的小鼠1 小时前
AJAX(一)HTTP协议(请求响应报文),AJAX发送请求,请求问题处理
前端·http·ajax