Vue异步组件Demo

Vue异步组件Demo

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

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

index.html


<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
            content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible"
            content="ie=edge">
        <title>Document</title>
        <script>
            // 如果浏览器不支持Promise就加载promise-polyfill
            if ( typeof Promise === 'undefined' ) {
                var script = document.createElement( 'script' );
                script.type = 'text/javascript';
                script.src = 'https://cdn.jsdelivr.net/npm/[email protected]/dist/es6-promise.auto.min.js';
                document.head.appendChild( script );
            }
        </script>
        <!-- 引入Vue -->
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>

    <body>
        <div id="app" style="font-size: 22px">
            <!-- 异步组件async-comp -->
            <async-comp :list="['我是一个异步组件,','如果加载完成,','我就会在这里显示']"></async-comp>
        </div>

        <!-- 引入main.js     -->
        <script src="/main.js"></script>
    </body>

</html>

异步组件Async-Comp.js,

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

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

see github

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

原文地址:https://www.cnblogs.com/lalalagq/p/9960394.html

时间: 2024-10-08 23:37:15

Vue异步组件Demo的相关文章

在Java Web Project中实现Vue异步组件加载

背景 最近看上了ElementUI(Vue实现)用来实现一个管理系统Demo,其中一个最常见的需求就是左侧导航不动,右侧主页块在点击导航菜单时动态更新,如下图所示:之前的实现方案是右边嵌入一个iframe,动态更改iframe的url即可,现在既然用了Vue咱也试试单页,是不是显得更优雅.接着就接触到了vue-router.组件.异步组件这些关键字,本以为把页面定义为xxx.vue放到webapp下,然后告诉vue-router去加载就好了,最后发现自己想简单了,思维模式还停留在Java Web

vue异步组件和vue.router异步加载

以前在使用angular进行开发时,始终没有处理好异步加载的问题,最多只能使用requirejs异步加载controller里面的内容.导致后来项目扩大的时候,性能问题十分蛋疼.最后我竟然把单页面引用拆成了多页面应用,感觉好囧... 后来尝试用vue写一个项目,配合则webpack,发现效果相当的好.但是vue的异步组件文档太误导人了,让我尝试了好久才发现怎么用.文档上是这样写的: Vue.component('async-webpack-example', function (resolve)

vue异步组件

路由懒加载 当打包构建应用时,Javascript 包会变得非常大,影响页面加载速度.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载.如: const Foo = () => import('./Foo.vue') 异步组件 在大型应用中,我们可能需要将应用分割成小一些的代码块,并且只在需要的时候才从服务器加载一个模块.为了简化,Vue 允许你以一个工

vue 异步组件

路由懒加载 当打包构建应用时,Javascript 包会变得非常大,影响页面加载速度.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载.如: 1 const Foo = () => import('./Foo.vue') 异步组件 在大型应用中,我们可能需要将应用分割成小一些的代码块,并且只在需要的时候才从服务器加载一个模块.为了简化,Vue 允许你以一

Vue动态组件&异步组件

在动态组件上使用keep-alive 我们之前曾经在一个多标签的界面中使用is特性来切换不同的组件: <component v-bind:is="currentTabComponent"></component> 当在这些组件之间切换的时候,你有时会想保持这些组件的状态,以避免反复重渲染导致的性能问题. 如上是vue官网的例子,你会注意到如果你选择一篇文章,切换到Archive标签,然后切回Posts, 是不会继续展示你之前选择的文章的.因为你每次切换新标签的时

Vue动态加载异步组件

背景: 目前我们项目都是按组件划分的,然后各个组件之间封装成产品.目前都是采用iframe直接嵌套页面.项目中我们还是会碰到一些通用的组件跟业务之间有通信,这种情况下iframe并不是最好的选择,iframe存在跨域的问题,当然是postMessage还是可以通信的,但也并非是最好的.目前有这么一个场景:门户需要制作通用的首页和数据概览页面,首页和数据概览页面通过小部件来自由拼接.业务组件在制作的时候只需要提供各个模块小部件的url就可以了,可是如果小部件之间还存在联系呢?那么iframe是不好

Vue自己写组件——Demo详细步骤

公司近期发力,同时开了四五个大项目,并且都是用Vue来做的,我很荣幸的被分到了写项目公用模块的组,所以需要将公用的部分提取成组件的形式,供几个项目共同使用,下面详细讲一下写Vue组件的具体步骤. 一.创建组件文件 假如几个项目共用一个头部组件header,我们先建立所需要的文件:header.vue 存放header的模板等内容,index.js 是编写header组件的js文件 二.编写组件模板文件 //这里是header.vue文件<template> <div class=&quo

自定义vue全局组件use使用、vuex的使用

自定义vue全局组件use使用(解释vue.use()的原理)我们在前面学习到是用别人的组件:Vue.use(VueRouter).Vue.use(Mint)等等.其实使用的这些都是全剧组件,这里我们就来讲解一下怎么样定义一个全局组件,并解释vue.use()的原理而我们再用Axios做交互,则不能使用Vue.use(Axios),因为Axios没有install 自定义一个全局Loading组件,并使用:总结目录: |-components |-loading |-index.js 导出组件,

如何理解vue.js组件的作用域是独立的

vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内data数据,如果要用父组件的必须用props传递:3.子组件标签的数据,使用父组件内的data数据 案例代码: <div id="demo"> <my-component v-if="show" v-bind:my-message="messa