木灵鱼儿

木灵鱼儿

阅读：1066

最后更新：2020/09/25/ 12:02:33

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

效果相同

文章分类 vue 项目实战
文章标签 vue异步组件
木灵鱼儿

木灵鱼儿

发布了 562 篇文章获得点赞 0获得阅读 1066

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。

one
two
three
  1. 风水学知识
    风水学知识
    FireFox Windows 10

    文章写的不错,加油~

    回复
    1. 木灵鱼儿
      木灵鱼儿
      FireFox Windows 10
      @风水学知识

      [拥抱]客气

      回复

关于作者

站点职位 博主
获得点赞 0
文章被阅读 1066

相关文章

scss 自动生成margin和padding的classscss 自动生成margin和padding的class
深度合并对象的方法深度合并对象的方法
vue 过滤器 驼峰与短横线相互转换的方法vue 过滤器 驼峰与短横线相互转换的方法
利用JSON过滤对象和数组中指定的key属性利用JSON过滤对象和数组中指定的key属性
使用vue.draggable拖拽组件遇到的一些问题使用vue.draggable拖拽组件遇到的一些问题