Vue异步组件Demo

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

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

index.html


  2. <!DOCTYPE html>
  3. <html lang="en">
  5.     <head>
  6.         <meta charset="UTF-8">
  7.         <meta name="viewport"
  8.             content="width=device-width, initial-scale=1.0">
  9.         <meta http-equiv="X-UA-Compatible"
  10.             content="ie=edge">
  11.         <title>Document</title>
  12.         <script>
  13.             // 如果浏览器不支持Promise就加载promise-polyfill
  14.             if ( typeof Promise === 'undefined' ) {
  15.                 var script = document.createElement( 'script' );
  16.                 script.type = 'text/javascript';
  17.                 script.src = 'https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js';
  18.                 document.head.appendChild( script );
  19.             }
  20.         </script>
  21.         <!-- 引入Vue -->
  22.         <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  23.     </head>
  25.     <body>
  26.         <div id="app" style="font-size: 22px">
  27.             <!-- 异步组件async-comp -->
  28.             <async-comp :list="['我是一个异步组件，','如果加载完成，','我就会在这里显示']"></async-comp>
  29.         </div>
  31.         <!-- 引入main.js     -->
  32.         <script src="/main.js"></script>
  33.     </body>
  35. </html>

异步组件Async-Comp.js，

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

  2. window.async_comp = {
  3.     template: '\
  4.         <ol>\
  5.             <li v-for="item in list">{{ item }}</li>\
  6.         </ol>',
  7.     props: {
  8.         list: Array
  9.     }
  10. };

main.js


  2. var vm = new Vue( {
  3.     el: '#app',
  4.     components: {
  5.         /* 异步组件async-comp */
  6.         'async-comp': function () {
  7.             return {
  8.                 /** 要渲染的异步组件，必须是一个Promise对象 */
  9.                 component: new Promise( function ( resolve, reject ) {
  10.                     var script = document.createElement( 'script' );
  11.                     script.type = 'text/javascript';
  12.                     script.src = '/Async-Comp.js';
  13.                     document.head.appendChild( script );
  15.                     script.onerror = function () {
  16.                         reject( 'load failed!' );
  17.                     }
  19.                     script.onload = function () {
  20.                         if ( typeof async_comp !== 'undefined' )
  21.                             resolve( async_comp );
  22.                         else reject( 'load failed!' )
  23.                     }
  24.                 } ),
  25.                 /* 加载过程中显示的组件 */
  26.                 loading: {
  27.                     template: '<p>loading...</p>'
  28.                 },
  29.                 /* 出现错误时显示的组件  */
  30.                 error: {
  31.                     template: '\
  32.                         <p style="color:red;">load failed!</p>\
  33.                     '
  34.                 },
  35.                 /* loading组件的延迟时间 */
  36.                 delay: 10,
  37.                 /* 最长等待时间，如果超过此时间，将显示error组件。 */
  38.                 timeout:3200
  39.             }
  40.         }
  41.     }
  42. } )

see github

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

Vue异步组件Demo的更多相关文章

  1. vue项目实现按需加载的3种方式：vue异步组件技术、es提案的import()、webpack提供的require.ensure()

    1. vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载. 但是,这种情况下一个组件生成一个js文件. 举例如下: { path: '/promisedemo ...

  2. route按需加载的3种方式：vue异步组件、es提案的import()、webpack的require.ensure()

    1. vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载. 但是,这种情况下一个组件生成一个js文件.举例如下: { path: '/promisedemo' ...

  3. 揭开Vue异步组件的神秘面纱

    简介 在大型应用里,有些组件可能一开始并不显示,只有在特定条件下才会渲染,那么这种情况下该组件的资源其实不需要一开始就加载,完全可以在需要的时候再去请求,这也可以减少页面首次加载的资源体积,要在Vue ...

  4. vue异步组件？

    为了简化,Vue 允许你以一个工厂函数的方式定义你的组件,这个工厂函数会异步解析你的组件定义.Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数,且会把结果缓存起来供未来重渲染Vue.compo ...

  5. VUE的组件DEMO

    组件的基本写法可以如下: HTML: <div id="components-demo"> <button-counter self-data="thi ...

  6. Vue动态注册异步组件（非同一个工程的组件）

    前言:最近在掘金逛的时候,无意中看到前滴滴前端架构黄轶大佬,看到了大佬分享的一篇博客滴滴 webapp 5.0 Vue 2.0 重构经验分享 ,对于其中第5个问题(异步加载的业务线组件,如何动态注册? ...

  7. vue路由异步组件案例

    最近研究了vue性能优化,涉及到vue异步组件.一番研究得出如下的解决方案. 原理:利用webpack对代码进行分割是异步调用组件前提.异步组件在优先级上让位同步组件.下面介绍的是怎么实现异步组件. ...

  8. vue深入了解组件——动态组件&异步组件

    一.在动态组件上使用 keep-alive 我们之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件: <component v-bind:is="currentTabComp ...

  9. Vue动态组件&异步组件

    在动态组件上使用keep-alive 我们之前曾经在一个多标签的界面中使用is特性来切换不同的组件: Vue.js的动态组件模板 <component v-bind:is="curre ...

随机推荐

  1. luoguP1390 公约数的和 数学推导_双倍经验

    Code: #include <bits/stdc++.h> #include <tr1/unordered_map> #define setIO(s) freopen(s&q ...

  2. Coding for Speed 技术分享

    上周和公司技术同事们作了次<Coding for Speed>技术分享,本来这只是再普通不过的技术探讨和交流(虽然挂了个颇有噱头的名称),但分享的时候逻辑没理好,语速很快,时间也太紧,因此 ...

  3. php字符处理

    1.strstr 截取某个字符后的字符: echo strstr("123456789","5");//输出:6789

  4. ORA-01795: 列表中的最大表达式数为 1000

    系统报出一SQL异常,内容如下: java.sql.SQLException: ORA-01795: maximum number of expressions in a list is 1000 找 ...

  5. 阅读《Android 从入门到精通》（15）——数字时钟

    数字时钟(DigitalClock) java.lang.Object; android.view.View; android.widget.TextView; android.widget.Digi ...

  6. Nginx系列（四）--工作原理

    上篇文章介绍了Nginx框架的设计之管理进程以及多个工作进程的设计.master进程用来管理通过fork子进程与子进程通信.子进程通过处理进程信号接到master的通信去处理请求. Nginx工作原理 ...

  7. poj2528 Mayor&#39;s posters（线段树，离散化）

    离散化的思想: 对于这样的数据 (3,10000). (9,1000000). (5.100000), (1,1000). (7,1000000) 我们能够将其处理为 (2,7). (5,9). (3 ...

  8. SQL编码中注意的性能问题

    1.选择合适的数据类型 为列选择最小化的数据类型 假设一列中的文本长度不一,使用VARCHAR而不是CHAR 不存储Unicode不要使用NVARCHAR或者NCHAR 假设一行的长度不超过8000, ...

  9. m_Orchestrate learning system---十五、如何快速查错

    m_Orchestrate learning system---十五.如何快速查错 一.总结 一句话总结: a.删除代码法 b.添加提示代码法 c.仔细看错误信息 1.评论板块和论坛板块的实时更新? ...

  10. CNN tflearn处理mnist图像识别代码解说——conv_2d参数解释，整个网络的训练，主要就是为了学那个卷积核啊。

    官方参数解释: Convolution 2D tflearn.layers.conv.conv_2d (incoming, nb_filter, filter_size, strides=1, pad ...