Vue中的异步组件详解

文章目录

• 一、什么是异步组件？
• 二、组件的加载VS渲染
• 三、异步组件Vs普通组件
• 四、异步组件的注册
• • 4.1. 基础使用
  • 4.2. require引入组件
  • 4.3. import引入组件
  • 4.4. 局部注册
• 五、处理加载状态
• 六、案例（异步同步组件初体验）
• • 6.1. 目录结构
  • 6.2. App.vue
  • 6.3. asyncComponent异步组件内容
  • 6.4. syncComponent同步组件内容
  • 6.5. 效果
• 七、总结

一、什么是异步组件？

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代码才开始执行

七、总结