vue中异步组件实现动态挂载

本篇文章很简单，我们主要想说明两个问题 动态组件Component 和 异步加载组件。

一、常用的组件加载方式

      首先，我们要明确什么是异步加载组件，那与之对应的同步加载组件又是怎么一回事呢？字面意思就是，同步加载就是指，随着项目的初始化完成，所有要用到的组件都已经被加载到页面中了，有时候，我们是通过设置样式的方式让其隐藏。虽然这种方式能解决我们的大部分问题，但是在追求首屏加载时间最短的情况下，一次性加载所有的组件，并不是一个很明智的选择。

      我们可以通过先加载一部分页面必须的组件，另外一部分组件当需要的时候在加载，比如登录组件，当我们点击登录按钮的时候，再加载登录组件。

二、码上见真知

1.同步方式引用组件

import MHeader from '@c/MHeader'
export default {
  name: 'MHeader',
  components: {
    MHeader
  }
}

2. 异步方式引用组件

<template>
  <div class="home">
    <button @click="toggleAbout">toggleAbout</button>
    <button @click="toggleMy">toggleMy</button>
    <Component :is="currentComponent"></Component>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      currentComponent: 'about'
    }
  },
  components: {
    // 异步组件引入方式，异步组件：只有在需要去展示这个组件的时候，才会把这个组件进行渲染
    about: () => import('./About'),
    my: () => import('./My')
  },
  methods: {
    toggleAbout () {
      this.currentComponent = 'about'
    },
    toggleMy () {
      this.currentComponent = 'my'
    }
  }
}
</script>

为了我们可以看到效果，我们要移步到浏览器的netWork面板。当页面初始化的时，加载的文件如下图所示

初始化
然后点击toggleMy按钮，又会加载一个文件，如下图所示：
点击toggleMy按钮后的结果
我们可以分别打开这两个文件进行查看。
about.js

 /***/
    "./src/views/About.vue": /*!*****************************!*\
  !*** ./src/views/About.vue ***!
  \*****************************/

0.js

/***/
    "./src/views/My.vue": /*!**************************!*\
  !*** ./src/views/My.vue ***!

从中，我们可以看出组件异步加载的身影了！