Vue中的异步组件详解

一、什么是异步组件？

Vue 异步组件： 是指通过异步方式加载的组件。

当我们的项目达到一定的规模时，对于某些组件来说，我们并不希望一开始全部加载，而是需要的时候进行加载。这样做可以很好的提高用户体验，加快页面的载入速度，为此Vue 提供了异步组件的性能优化方案。

二、组件的加载VS渲染

组件加载： 是组件的引入和注册，不走组件的生命周期函数
组件渲染： 是生成组件实例的过程，走生命周期函数

三、异步组件Vs普通组件

异步组件： 只有在template模板使用的时候，才会加载和渲染组件

同步组件： 在引入和注册的时候已经加载完成组件，在template模板使用的时候，开始渲染组件

四、异步组件的注册

4.1. 基础使用

Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
    // 向 `resolve` 回调传递组件定义
    resolve({
      template: '<div>I am async!</div>'
    })
  }, 1000)
})

工厂函数会收到一个 resolve 回调，这个回调函数会在你从服务器得到组件定义的时候被调用。你也可以调用 reject(reason) 来表示加载失败。这里的 setTimeout 是为了演示用的，如何获取组件取决于你自己

4.2. require引入组件

异步组件和 webpack 的 code-splitting 功能一起配合使用

Vue.component('async-webpack-example', function (resolve) {
  // 这个特殊的 `require` 语法将会告诉 webpack
  // 自动将你的构建代码切割成多个包，这些包
  // 会通过 Ajax 请求加载
  require(['./my-async-component'], resolve)
})

4.3. import引入组件

你也可以在工厂函数中返回一个 Promise，import()会返回一个 Promise

Vue.component(
  'async-webpack-example',
  // 这个动态导入会返回一个 `Promise` 对象。
  () => import('./my-async-component')
)

4.4. 局部注册

当使用局部注册的时候，你也可以直接提供一个返回 Promise 的函数：

components: {
  // 方式一: import
  AsyncComponent: () => import("./components/asyncComponent.vue"),

  // 方式二: require
  AsyncComponent: (resolve) => require(["./components/asyncComponent.vue"], resolve),
},

require(["./components/asyncComponent.vue"], resolve)也是一个Promise

五、处理加载状态

const AsyncComponent = () => ({
  // 需要加载的组件 (应该是一个 `Promise` 对象)
  component: import('./MyComponent.vue'),
  // 异步组件加载时使用的组件
  loading: LoadingComponent,
  // 加载失败时使用的组件
  error: ErrorComponent,
  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
  delay: 200,
  // 如果提供了超时时间且组件加载也超时了，
  // 则使用加载失败时使用的组件。默认值是：`Infinity`
  timeout: 3000
})

全局注册

Vue.component('async-webpack-example', AsyncComponent)

局部注册

components: {
  AsyncComponent: AsyncComponent),
},

六、案例（异步同步组件初体验）

async： 异步
sync： 同步

6.1. 目录结构

6.2. App.vue

• App.vue主页面中、分别用同步和异步的方式引入组件syncComponent和asyncComponent
• 点击按钮可以控制两个组件的渲染

<template>
  <div id="app">
    <button @click="shwoAsync = true">展示异步组件</button>
    <button @click="shwoSync = true">展示同步组件</button>
    <!-- 异步组件 -->
    <AsyncComponent v-if="shwoAsync" />
    <!-- 同步组件 -->
    <SyncComponent v-if="shwoSync" />
  </div>
</template>

<script>
import SyncComponent from "./components/syncComponent.vue";
export default {
  name: "App",
  components: {
    AsyncComponent: () => import("./components/asyncComponent.vue"),
    SyncComponent,
  },
  data() {
    return {
      // 是否展示异步组件
      shwoAsync: false,
      // 是否展示同步组件
      shwoSync: false,
    };
  },
};
</script>

6.3. asyncComponent异步组件内容

<script>
/*
 * 异步组件：当第一次切换到当前组件时候，才会去后台请求异步组件渲染函数，请求完了之后，
 * 下面这句代码才会执行，然后根据这个渲染函数创建组件实例
 */
console.log("异步组件加载----");
export default {
  name: "AsyncComponent",
};
</script>

6.4. syncComponent同步组件内容

<script>
/* 这个在没有渲染到该组件时, 就已经被引入执行了，只会执行一次 */
console.log("同步组件加载----");
export default {
  name: "syncComponent",
};
</script>

6.5. 效果

打开控制，在进入App.vue的时候、同步组件syncComponent的js代码已经开始执行

但是，只有点击展示异步组件按钮的时候，异步组件的js代码才开始执行

七、总结

对比项	普通组件	异步组件
加载方式	在应用启动时一次性加载所有组件	按需动态加载组件，只有在实际需要时才加载
性能	所有组件都会在应用启动时加载，可能导致初始加载时间较	只加载必要的组件，减少初始加载时间，提高应用性能
可复用性	组件可以在不同的页面或场景中复用	异步组件也可以复用，但需要注意加载时机和依赖关系
模块化	方便进行代码的模块化组织	支持更细粒度的模块划分，更好地管理代码
使用方式	在组件定义中直接使用	通过 async component 或动态导入的方式使用