vue 异步组件

传统的vue组件切换，无非是Vue.component定义一个组件，然后设置一个名字，再通过component自定义html元素加上is属性去动态切换组件。

vue-cli的话，在components里面将import的组件激活，然后也是is属性配合component自定义html元素进行切换。

那么异步组件的优点在哪里呢？

无非是组件会作为一个单独的js文件存在，需要时才被调用，这个特性再开发单页的时候最明显，他是会在打包后将异步组件单独生成一个js文件，在调用时下载并使用。

如何创建一个异步组件

Vue.component创建异步组件

这个方法适合script引入vue.js的那种方式，估计也用处不大，做个演示

Vue.component("async-hello", function (resolve) {
  setTimeout(function () {
    resolve({
      template: `<div>async-hello</div>`
    });
  }, 1000)
});

将这个组件保存为js文件在vue.js文件引入后引入。

然后可以在后面的new Vue对象中使用该组件。

vue-cli 单页创建一个异步组件

首先我们创建一个hello.vue文件：

<template>
  <div>hello word</div>
</template>

然后在需要引入的地方，通过components异步引入激活：

components: {
    "async-hello": (resolve) => {
      require(["@/components/hello"], resolve);
    },
  },

然后就可以使用自定义标签使用该组件

<async-hello/>

这样写的话默认是直接就加载了，但是组件会作为一个单独的js文件引入使用。

我们可以加点if判断

<template>
  <div id="app">
    <async-hello v-if="show" />
    <button @click="toggle">加载</button>
  </div>
</template>
<script>
export default {
  data: () => ({
    show: false,
  }),
  methods: {
    toggle() {
      this.show = !this.show;
    },
  },
  components: {
    "async-hello": (resolve) => {
      require(["@/components/hello"], resolve);
    },
  },
};
</script>

这样我们可以通过f12查看网络资源，当我们点击加载后，可以看到一个js文件被下载。

并且打包后也会发现会多生成一个组件js文件。

promise写法

这个写法相对来说就简单很多了，好记的很，我目前所有的路由页都是使用的该方式

components: {
    "async-hello": (resolve) => import("@/components/hello"),
  },

效果相同