Vue异步组件Demo

在大型应用中，我们可能需要将应用拆分为多个小模块，按需从服务器下载。为了进一步简化，Vue.js 允许将组件定义为一个工厂函数，异步地解析组件的定义。Vue.js 只在组件需要渲染时触发工厂函数，并且把结果缓存起来，用于后面的再次渲染。

下面是我写的一个简单Vue异步组件Demo。

index.html



&lt;!DOCTYPE html&gt;

&lt;html lang="en"&gt;

    &lt;head&gt;

        &lt;meta charset="UTF-8"&gt;

        &lt;meta name="viewport"

            content="width=device-width, initial-scale=1.0"&gt;

        &lt;meta http-equiv="X-UA-Compatible"

            content="ie=edge"&gt;

        &lt;title&gt;Document&lt;/title&gt;

        &lt;script&gt;

            // 如果浏览器不支持Promise就加载promise-polyfill

            if ( typeof Promise === 'undefined' ) {

                var script = document.createElement( 'script' );

                script.type = 'text/javascript';

                script.src = 'https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js';

                document.head.appendChild( script );

            }

        &lt;/script&gt;

        &lt;!-- 引入Vue --&gt;

        &lt;script src="https://cdn.jsdelivr.net/npm/vue"&gt;&lt;/script&gt;

    &lt;/head&gt;

    &lt;body&gt;

        &lt;div id="app" style="font-size: 22px"&gt;

            &lt;!-- 异步组件async-comp --&gt;

            &lt;async-comp :list="['我是一个异步组件，','如果加载完成，','我就会在这里显示']"&gt;&lt;/async-comp&gt;

        &lt;/div&gt;

        &lt;!-- 引入main.js     --&gt;

        &lt;script src="/main.js"&gt;&lt;/script&gt;

    &lt;/body&gt;

&lt;/html&gt;

异步组件Async-Comp.js，

注意，Async-Comp.js并没有在index.html中引用，而是在下面的main.js中动态加载。



window.async_comp = {

    template: '\

        &lt;ol&gt;\

            &lt;li v-for="item in list"&gt;{{ item }}&lt;/li&gt;\

        &lt;/ol&gt;',

    props: {

        list: Array

    }

};

main.js



var vm = new Vue( {

    el: '#app',

    components: {

        /* 异步组件async-comp */

        'async-comp': function () {

            return {

                /** 要渲染的异步组件，必须是一个Promise对象 */

                component: new Promise( function ( resolve, reject ) {

                    var script = document.createElement( 'script' );

                    script.type = 'text/javascript';

                    script.src = '/Async-Comp.js';

                    document.head.appendChild( script );

                    script.onerror = function () {

                        reject( 'load failed!' );

                    }

                    script.onload = function () {

                        if ( typeof async_comp !== 'undefined' )

                            resolve( async_comp );

                        else reject( 'load failed!' )

                    }

                } ),

                /* 加载过程中显示的组件 */

                loading: {

                    template: '&lt;p&gt;loading...&lt;/p&gt;'

                },

                /* 出现错误时显示的组件  */

                error: {

                    template: '\

                        &lt;p style="color:red;"&gt;load failed!&lt;/p&gt;\

                    '

                },

                /* loading组件的延迟时间 */

                delay: 10,

                /* 最长等待时间，如果超过此时间，将显示error组件。 */

                timeout:3200

            }

        }

    }

} )

see github

原文地址：https://segmentfault.com/a/1190000012561857

巴特西

Vue异步组件Demo

Vue异步组件Demo

index.html

异步组件Async-Comp.js，

main.js

see github

最新文章

热门文章