vue 异步组件 使用方式

异步组件的应用场景

摘自vue官网

大型应用中,我们可能需要将应用分割成小一些的代码块,并且只在需要的时候从服务器加载一个模块。
为了简化,Vue 允许你以一个工厂函数的方式定义你的组件,这个工厂函数会异步解析你的组件定义。
Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数,且会把结果缓存起来供未来重渲染。

在webpack项目中使用

在这里插入图片描述

全局注册

Main.js

const AsyncComponent = Vue.component('async-component', function (resolve) {
//延时演示
  setTimeout(function () {
          require(['./components/AsyncComponent.vue'], resolve)
      },5000);
});

app.vue

<template>
  <div id="app">
    <async-component></async-component>
  </div>
</template>
<script>
export default {
  name: 'App',
}
</script>

AsyncComponent

<template>
    <div>
        <center>
            <h1>
                my name is async
            </h1>
        </center>
    </div>
</template>

局部注册

<template>
  <div id="app">
    <async-component></async-component>
  </div>
</template>
<script>
export default {
  name: 'App',
  components: {
      'async-component': function (resolve) {
          //延时演示
          setTimeout(function () {
              require(['./components/AsyncComponent.vue'], resolve)
          }, 5000);
      }
  }
}
</script>

使用vue自带的工厂函数注册

<template>
    <div id="app">
        <async-component></async-component>
    </div>
</template>
<script>
    import loading from './components/Loading.vue'
    import error from './components/Error.vue'
    const AsyncComponent = () => ({
        // 需要加载的组件 (应该是一个 `Promise` 对象)
        component: new Promise((reslove) => {
            setTimeout(()=>{
                require(["./components/AsyncComponent.vue"], reslove)
            },1000);
        }),
        // 异步组件加载时使用的组件
        loading: loading,
        // 加载失败时使用的组件
        error: error,
        // 展示加载时组件的延时时间。默认值是 200 (毫秒)
        delay: 200,
        // 如果提供了超时时间且组件加载也超时了,
        // 则使用加载失败时使用的组件。默认值是:`Infinity`
        timeout: 3000
    });
    export default {
        name: 'App',
        components: {
            'async-component': AsyncComponent
        }
    }
</script>

git 示例

https://gitee.com/study_model/vue-pack-study.git

查看不同分支

### Vue 异步组件的具体使用方法 Vue 提供了一种机制用于定义异步组件,这使得我们可以按需加载组件,从而优化应用性能。以下是关于 Vue 异步组件的详细说明以及具体使用示例。 #### 定义异步组件Vue 中,可以通过 `defineAsyncComponent` 方法创建一个异步组件。此函数接收一个返回 Promise 的工厂函数作为参数,在该工厂函数中通常会调用动态导入语法 (`import`) 来加载组件模块[^3]。 下面是一个基本的例子: ```javascript // 导入 defineAsyncComponent 函数 import { defineAsyncComponent } from 'vue'; // 创建异步组件 const AsyncComponent = defineAsyncComponent(() => import('./components/MyComponent.vue') ); ``` 在这个例子中,当 `AsyncComponent` 实际被挂载到 DOM 上时,才会触发 `./components/MyComponent.vue` 文件的加载过程。 #### 处理加载状态 为了提供更好的用户体验,可以在异步组件加载期间展示一些占位符或者提示信息。通过 `<Suspense>` 组件可以轻松实现这一点。`<Suspense>` 是 Vue 3 新增的功能,它允许我们指定默认插槽(正常内容)和回退插槽(加载中的内容)。如果子组件尚未解析,则显示回退插槽的内容;一旦子组件成功加载完毕,就会替换为默认插槽的内容。 以下是如何结合 `<Suspense>` 使用异步组件的一个实例: ```html <template> <Suspense> <!-- 默认插槽 --> <template #default> <AsyncComponent /> </template> <!-- 回退插槽 --> <template #fallback> <div>Loading...</div> </template> </Suspense> </template> <script setup> import { defineAsyncComponent } from 'vue'; const AsyncComponent = defineAsyncComponent(() => import('./components/MyComponent.vue') ); </script> ``` 在此模板里,当 `AsyncComponent` 正处于加载阶段时,“Loading...” 文本会被呈现给用户知道当前正在等待资源下载完成。 #### 结合 TypeScript 封装异步组件 如果你正在使用 TypeScript 开发项目,那么也可以很方便地将上述逻辑应用于带有类型安全性的场景下。这里给出一段基于 TypeScript 的代码片段来演示如何封装一个支持泛型类型的通用异步组件定义器[^4]: ```typescript function createAsyncComponent<T extends Record<string, any>>( loader: () => Promise<{ default: T }> ): T { return defineAsyncComponent(loader); } // 使用方式 const MyAsyncComponent = createAsyncComponent(() => import('./components/AnotherComponent.vue') ); ``` 以上代码展示了怎样利用自定义辅助函数简化多次重复操作的同时还保留了完整的类型检查能力[^4]。 --- ### 问题
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

SUNbrightness

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值