简单的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 相关文章推荐
一段好玩的JavaScript代码
Dec 01 Javascript
Web层改进II-用xmlhttp 无声息提交复杂表单
Jan 22 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
Mar 14 Javascript
css结合js制作下拉菜单示例代码
Feb 27 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
Apr 20 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
Jun 13 Javascript
Vue.js每天必学之过渡与动画
Sep 06 Javascript
从零开始做一个pagination分页组件
Mar 15 Javascript
BootStrap daterangepicker 双日历控件
Jun 02 Javascript
基于node.js之调试器详解
Aug 22 Javascript
微信小程序实现弹框效果
May 26 Javascript
vue配置多代理服务接口地址操作
Sep 08 Javascript
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 程序授权验证开发思路
2009/07/09 PHP
php对象和数组相互转换的方法
2015/05/12 PHP
Zend Framework开发入门经典教程
2016/03/23 PHP
php使用pear_smtp发送邮件
2016/04/15 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
laravel 解决paginate查询多个字段报错的问题
2019/10/22 PHP
JavaScript 异步调用框架 (Part 2 - 用例设计)
2009/08/03 Javascript
理解Javascript_01_理解内存分配原理分析
2010/10/11 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
jQuery实现点击标题输入详细信息
2013/04/16 Javascript
JavaScript调试工具汇总
2014/12/23 Javascript
jQuery无刷新上传之uploadify简单代码
2017/01/17 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
2017/06/08 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
2019/01/24 Javascript
Python读取本地文件并解析网页元素的方法
2018/05/21 Python
python获取交互式ssh shell的方法
2019/02/14 Python
python批量创建指定名称的文件夹
2019/03/21 Python
windows环境中利用celery实现简单任务队列过程解析
2019/11/29 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
python中使用you-get库批量在线下载bilibili视频的教程
2020/03/10 Python
python删除某个目录文件夹的方法
2020/05/26 Python
浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)
2020/06/04 Python
Ubuntu16安装Python3.9的实现步骤
2020/12/15 Python
英国在线自行车商店:Evans Cycles
2016/09/26 全球购物
美国男士内衣品牌:Tommy John
2017/12/22 全球购物
本科生学习总结的自我评价
2013/10/02 职场文书
关于逃课的检讨书
2014/01/23 职场文书
餐厅总厨求职信
2014/03/04 职场文书
2014应届本科生自我评价
2014/09/13 职场文书
初三学生语文考试作弊检讨书
2014/12/14 职场文书
房产电话营销开场白
2015/05/29 职场文书
2016年教师学习教师法心得体会
2016/01/20 职场文书
《绝招》教学反思
2016/02/20 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书
MySQL视图概念以及相关应用
2022/04/19 MySQL