Vue之异步组件【按需加载，动态引入，乃Vue异步组件之精髓也】

引子

搞一搞Vue的学习吧，咱们来说说Vue中的那个家伙——异步组件。这异步组件来头不小，究竟是个啥呢？它有那么重要吗？咱们一探究竟。

有的时候，我们的Vue项目有些页面可能包含了大量的组件，而且每个组件又大如猪笼相同，一下子在页面加载的时候把所有组件都给用户看，这不就相当于端着大猪笼去赶集嘛。于是，我们就想到了按需加载。想用啥，就加载啥，用不着的东西，先放放。这就是Vue异步组件的来历。使用异步组件的话，可以大大减少首页加载需要的时间，网页反应会更快，用户也会得到更好的体验。

异步组件是怎么一回事？

异步组件就是我们的Vue项目中，需要但又不需要立即使用的组件。简单来说，就是按需加载。只有当组件真的需要呈现在用户眼前的时候，我们才去加载它。这样的好处就是可以减轻首页的加载压力，使得网页的响应速度更快，同时也方便我们复用和管理代码。

怎么去使用呢？

1. 我们要创建一个异步组件，只需要这样：

 const MyComponent = () => Promise.resolve({
      template: '<div>我是异步加载的组件</div>'
 })

这段代码的意思就是说，我定义了一个MyComponent，它实际上是一个异步加载的组件。这个组件可能需要花一些时间来加载，并且加载成功后会返回一个包含模板定义的Promise对象。

2. 我们在去使用的时候，先注册一下这个异步组件：

  new Vue({
      el: '#app',
      components: {
          MyComponent
      }
  })

注册完以后，我们就可以在HTML中使用这个异步组件了：

 <div id="app">
     <my-component></my-component>
 </div>

需要注意的是，在Vue的异步组件中，并不像普通组件那样可以直接在created生命周期使用数据和方法，因为此时的异步组件可能还没有准备好。但是，在mounted生命周期就可以放心地使用了，因为mounted生命周期会在组件被挂载到DOM上后触发。

小结

简单来说，Vue的异步组件就是个“救星”，可以大大提高页面的性能和用户体验，值得诸位在实际的项目中去使用。