简单的Vue异步组件实例Demo


Posted in Javascript onDecember 27, 2017

前言

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

为什么需要异步组件,道理和webpack的按需加载是一样的,如果一开始就加载所有的组件,那么是比较耗时的,所以我们可以将一些组件定义为异步组件,在需要使用的时候再进行加载。

所以好处的话就显而易见了 :

  • 按需加载,可以节省首次加载的时间,提高速度,也算是一个性能优化。
  • 那么一个组件可能会被使用多次,按需加载的话也不会加载多次,第一次加载完成就会缓存下来,和webpack是一样的,所以不用担心

最近读Vue文档的时候仔细看了一下异步组件部分,第一次看的时候一脸懵逼,看第二次还是有点迷茫,第三次就有点感觉了,第四次感觉有点明白了,遂记录一下,下面是我写的一个简单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/es6-promise@4/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
   }
  }
 }
} )

github地址:点击这里

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 Javascript
简单的两种Extjs formpanel加载数据的方式
Nov 09 Javascript
javascript 实现子父窗体互相传值的简单实例
Feb 17 Javascript
node.js cookie-parser 中间件介绍
Jun 06 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
Jul 12 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
Nov 10 Javascript
基于Vue2.0的分页组件
Mar 16 Javascript
详解JS模块导入导出
Dec 20 Javascript
Element-ui table中过滤条件变更表格内容的方法
Mar 02 Javascript
Node.js创建HTTP文件服务器的使用示例
May 11 Javascript
webpack4之SplitChunksPlugin使用指南
Jun 12 Javascript
vue backtop组件的实现完整代码
Apr 07 Vue.js
Vue.js组件间的循环引用方法示例
Dec 27 #Javascript
全面介绍vue 全家桶和项目实例
Dec 27 #Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 #jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 #jQuery
浅谈vue-router 路由传参的方法
Dec 27 #Javascript
关于laydate.js加载laydate.css路径错误问题解决
Dec 27 #Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
Dec 27 #Javascript
You might like
谈谈PHP语法(3)
2006/10/09 PHP
兼容性最强的PHP生成缩略图的函数代码(修改版)
2011/01/18 PHP
php无限分类且支持输出树状图的详细介绍
2013/06/19 PHP
回帖脱衣服的图片实现代码
2014/02/15 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
JavaScript常用全局属性与方法记录积累
2013/07/03 Javascript
JavaScript中操作Mysql数据库实例
2015/04/02 Javascript
3种js实现string的substring方法
2015/11/09 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
JSONP和批量操作功能的实现方法
2016/08/21 Javascript
JavaScript数据类型学习笔记分享
2016/09/01 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
2016/09/20 Javascript
jQuery实现自动调用和触发某个事件的方法
2016/11/18 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
JavaScript定义函数的三种实现方法
2017/09/23 Javascript
从零开始搭建webpack+react开发环境的详细步骤
2018/05/18 Javascript
JavaScript 下载svg图片为png格式
2018/06/21 Javascript
Vue使用Proxy监听所有接口状态的方法实现
2019/06/07 Javascript
vue语法自动转typescript(解放双手)
2019/09/18 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
2019/12/17 Javascript
js中!和!!的区别与用法
2020/05/09 Javascript
[01:15:29]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第三局
2016/03/04 DOTA
Python实现拷贝多个文件到同一目录的方法
2016/09/19 Python
一个基于flask的web应用诞生(1)
2017/04/11 Python
Python队列的定义与使用方法示例
2017/06/24 Python
Python读取sqlite数据库文件的方法分析
2017/08/07 Python
Django JWT Token RestfulAPI用户认证详解
2019/01/23 Python
python实现邮件发送功能
2019/08/10 Python
Python 随机按键模拟2小时
2020/12/30 Python
银行实习生的自我评价
2013/12/09 职场文书
校友会欢迎辞
2014/01/13 职场文书
大学生未来职业生涯规划书
2014/02/15 职场文书
创业计划书之零食店(进口)
2019/09/24 职场文书
导游词之吉林花园山
2019/10/17 职场文书
62句有关感恩节文案(推荐收藏)
2019/11/28 职场文书