简单的Vue异步组件实例Demo

网络编程 2024/5/19 佚名

3 2 1

前言

在大型应用中，我们可能需要将应用拆分为多个小模块，按需从服务器下载。为了进一步简化，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="/UploadFiles/2021-04-02/vue">

异步组件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地址：点击这里
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对的支持。

vue异步组件讲解,vue异步加载组件,vue2,页面内,异步组件

标签：

vue异步组件讲解,vue异步加载组件,vue2,页面内,异步组件

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“简单的Vue异步组件实例Demo”

简单的Vue异步组件实例Demo

暂无“简单的Vue异步组件实例Demo”评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新动态

20240519

简单的Vue异步组件实例Demo

vue异步组件讲解,vue异步加载组件,vue2,页面内,异步组件

nodejs超出最大的调用栈错误问题

Vue.js组件间的循环引用方法示例

评论“简单的Vue异步组件实例Demo”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新动态

友情链接