Vue异步组件Demo

lovXin 发布于2019-08-21 18:23 / 1936人阅读

摘要：异步组件在大型应用中，我们可能需要将应用拆分为多个小模块，按需从服务器下载。为了进一步简化，允许将组件定义为一个工厂函数，异步地解析组件的定义。下面是我写的一个简单异步组件。

Vue异步组件Demo

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

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

index.html

异步组件Async-Comp.js，

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

window.async_comp = {
    template: "
        
            {{ item }}
        ",
    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: "loading..."
                },
                /* 出现错误时显示的组件  */
                error: {
                    template: "
                        load failed!
                    "
                },
                /* loading组件的延迟时间 */
                delay: 10,
                /* 最长等待时间，如果超过此时间，将显示error组件。 */
                timeout:3200
            }
        }
    }
} )

see github

GPU云服务器云服务器 vue组件 vue组件开发 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90402.html

Vue.js 子组件的异步加载及其生命周期控制

摘要：本文主要对组件化开发中子组件的异步加载和其生命周期进行一些探讨。异步组件讨论异步加载，需要先了解下异步组件。生命周期控制在使用子组件或者叫局部注册时，我们可能需要在子组件实例化或者叫创建完毕后做某些事情。前端开发社区的繁荣，造就了很多优秀的基于 MVVM 设计模式的框架，而组件化开发思想也越来越深入人心。这其中不得不提到 Vue.js 这个专注于 VM 层的框架。本文主要对 Vue...

lidashuang 2019-08-22 11:17 评论0 收藏0
webpack配合vue.js实现完整的单页面demo

摘要：本篇文章主要是我在开发前研究了的单页面应用，因为需要用到的，所以确保安装了，建议官网安装最新的稳定版本。本文章只是和大家探讨怎么利用配合做一个单页面应用，具体关于里面的内容怎么写并不在本篇文章的介绍范围。本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用，因为需要用到node的npm，所以确保安装了node，建议官网安装最新的稳定版本。并且在项目中需要加载一些np...

2450184176 2019-08-19 18:35 评论0 收藏0
SMTC：Vue Single Js Component Manager

摘要：前言的单文件组件看着十分诱人，必须要上心有不甘，捣腾一番就有了这个不需要也能轻松愉快的用上单文件组件主要针对轻度使用场景，快速应用大型应用，专业前端，工程化前端还是更好快速入门单例组件是一种特殊的全局组件，和插件有点相似，只不过插件可以有更前言 Vue 的单文件组件（Single File Component）看着十分诱人，But 必须要上 webpack心有不甘，捣腾一番就有了这个...

luxixing 2019-08-23 16:13 评论0 收藏0
Vue.js学习系列二 —— vuex学习实践笔记（附DEMO）

摘要：有兴趣的同学可以查看之前发布的文章学习系列一学习实践笔记附学习系列二学习实践笔记附学习系列三和网络传输相关知识的学习实践学习系列四打包工具的使用学习系列五从来聊聊学习系列项目地址项目暂时有点乱，之后会进行整理优化。上次学习了vue-router的使用，让我能够在各个页面间切换，将页面搭建了起来。这次则要学习vue的状态管理模式——vuex。它类似于redux来应用的全局状态。注：本...

DobbyKim 2019-08-21 15:52 评论0 收藏0