异步组件

本节目标：理解“异步组件”的核心思路，并能把它用于实际开发或面试表达。 ==在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。为了简化，==Vue ==允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。==Vue ==只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。例如：==

Vue.component('async-example', function (resolve, reject) {  setTimeout(function () {    //

==向== `resolve` ==回调传递组件定义==

    resolve({      template: '<div>I am async!</div>'    })  }, 1000)})

==如你所见，这个工厂函数会收到一个== resolve ==回调，这个回调函数会在你从服务器得到组件定义的时候被调用。你也可以调用== reject(reason) ==来表示加载失败。这里的== setTimeout ==是为了演示用的，如何获取组件取决于你自己。一个推荐的做法是将异步组件和==

webpack

==的== code-splitting ==功能====一起配合使用：==

Vue.component('async-webpack-example', function (resolve) {

// ==这个特殊的== `require` ==语法将会告诉==

 webpack  //

==自动将你的构建代码切割成多个包，这些包==

  //

==会通过== Ajax ==请求加载==

  require(['./my-async-component'], resolve)})

==你也可以在工厂函数中返回一个== Promise==，所以把== webpack 2 ==和== ES2015 ==语法加在一起，我们可以这样使用动态导入：==

Vue.component(  'async-webpack-example',  //

==这个动态导入会返回一个== `Promise` ==对象。==

  () => import('./my-async-component'))

==当使用====局部注册====的时候，你也可以直接提供一个返回== Promise ==的函数：==

new Vue({  // ...  components: {    'my-component': () => import('./my-async-component')  }})

==如果你是一个== Browserify ==用户同时喜欢使用异步组件，很不幸这个工具的作者====明确表示====异步加载“并不会被== Browserify ==支持”，至少官方不会。==Browserify ==社区已经找到了====一些变通方案====，这些方案可能会对已存在的复杂应用有帮助。对于其它的场景，我们推荐直接使用== webpack==，以拥有内置的头等异步支持。==

处理加载状态2.3.0+ ==新增== ==这里的异步组件工厂函数也可以返回一个如下格式的对象：==

const AsyncComponent = () => ({  //

==需要加载的组件== (==应该是一个== `Promise` ==对象==

)  component: import('./MyComponent.vue'),  //

==异步组件加载时使用的组件==

  loading: LoadingComponent,  //

==加载失败时使用的组件==

  error: ErrorComponent,  //

==展示加载时组件的延时时间。默认值是== 200 (==毫秒==

)  delay: 200,  //

==如果提供了超时时间且组件加载也超时了，==

  //

==则使用加载失败时使用的组件。默认值是：==

`Infinity`  timeout: 3000})

==注意如果你希望在==

Vue Router

==的路由组件中使用上述语法的话，你必须使用== Vue Router 2.4.0+ ==版本。== > 来自

 <https://cn.vuejs.org/v2/guide/components-dynamic-async.html>