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"),
  },

效果相同

0
  • 本文分类:vue 项目实战
  • 本文标签:vue异步组件
  • 流行热度:已超过 158 人围观了本文
  • 最后更新:2020年09月25日 - 12时02分33秒
  • 发布日期:2020年09月25日 - 11时51分00秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿站点。未经许可,禁止转载。

相关文章

微信收款码
微信收款码