2019-02-27 vue组件基础篇7

• 异步组件

在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。

Vue.js只在组件需要渲染时触发工厂函数，并且把结果缓存起来，用于后面的再次渲染。
工厂函数接收一个resolve回调，在收到从服务器下载的组件定义时调用。也可以调用reject(reason)指示加载失败。这里setTimeout只是为了演示异步，具体的下载逻辑可以自己决定，比如把组件配置写成一个对象配置，通过Ajax来请求，然后调用resolve传入配置选项。

所谓工厂函数，就是指这些内建函数都是类对象，当你调用他们时，实际上是创建了一个类实例。
1.它是一个函数
2.它用来创建对象
3.它像工厂一样，“生产”出来的函数都是“标准件”拥有同样的属性

<div id="app">
        <child-component></child-component>
</div>
<script>
        Vue.component('child-component', function(resolve, reject) {
            window.setTimeout(function () {
                resolve({
                    template: '<div>我是异步渲染的</div>'
                })
            }, 2000);
        })

        var app = new Vue({
            el: '#app'
        })
</script>