搜索
首页web前端js教程在Vue中有关于异步组件的示例
在Vue中有关于异步组件的示例Jun 15, 2018 am 11:29 AM
vue2异步组件

大家都知道当使用时才装入需要的组件,可以有效的提高首次装入页面的速度。比如在路由切换时,下面这篇文章主要给大家介绍了关于如何实现一个简单的Vue异步组件的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下。

前言

在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载。为了进一步简化,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 === &#39;undefined&#39; ) {
    var script = document.createElement( &#39;script&#39; );
    script.type = &#39;text/javascript&#39;;
    script.src = &#39;https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js&#39;;
    document.head.appendChild( script );
   }
  </script>
  <!-- 引入Vue -->
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 </head>
 <body>
  <p id="app" style="font-size: 22px">
   <!-- 异步组件async-comp -->
   <async-comp :list="[&#39;我是一个异步组件,&#39;,&#39;如果加载完成,&#39;,&#39;我就会在这里显示&#39;]"></async-comp>
  </p>

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

异步组件Async-Comp.js,

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

window.async_comp = {
 template: &#39;\
  <ol>\
   <li v-for="item in list">{{ item }}</li>\
  </ol>&#39;,
 props: {
  list: Array
 }
};

main.js

var vm = new Vue( {
 el: &#39;#app&#39;,
 components: {
  /* 异步组件async-comp */
  &#39;async-comp&#39;: function () {
   return {
    /** 要渲染的异步组件,必须是一个Promise对象 */
    component: new Promise( function ( resolve, reject ) {
     var script = document.createElement( &#39;script&#39; );
     script.type = &#39;text/javascript&#39;;
     script.src = &#39;/Async-Comp.js&#39;;
     document.head.appendChild( script );
     script.onerror = function () {
      reject( &#39;load failed!&#39; );
     }

     script.onload = function () {
      if ( typeof async_comp !== &#39;undefined&#39; )
       resolve( async_comp );
      else reject( &#39;load failed!&#39; )
     }
    } ),
    /* 加载过程中显示的组件 */
    loading: {
     template: &#39;<p>loading...</p>&#39;
    },
    /* 出现错误时显示的组件 */
    error: {
     template: &#39;\
      <p style="color:red;">load failed!</p>\
     &#39;
    },
    /* loading组件的延迟时间 */
    delay: 10,
    /* 最长等待时间,如果超过此时间,将显示error组件。 */
    timeout:3200
   }
  }
 }
} )

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

使用jquery如何实现定位式导航

在jquery中如何实现左右轮播切换

使用jquery如何实现楼层滚动效果

在jQuery中如何获取数据赋值给页面

在three.js中如何实现3D模型展示

以上是在Vue中有关于异步组件的示例的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
vue2与vue3中的生命周期执行顺序有什么区别vue2与vue3中的生命周期执行顺序有什么区别May 16, 2023 pm 09:40 PM

vue2与vue3中生命周期执行顺序区别生命周期比较vue2中执行顺序beforeCreate=>created=>beforeMount=>mounted=>beforeUpdate=>updated=>beforeDestroy=>destroyedvue3中执行顺序setup=>onBeforeMount=>onMounted=>onBeforeUpdate=>onUpdated=>onBeforeUnmount=&g

快速搞懂Vue2 diff算法(图文详解)快速搞懂Vue2 diff算法(图文详解)Mar 17, 2023 pm 08:23 PM

diff算法是一种通过同层的树节点进行比较的高效算法,避免了对树进行逐层搜索遍历。那么大家对diff算法吗有多少了解?下面本篇文章就来带大家深入解析下vue2的diff算法,希望对大家有所帮助!

VUE3开发基础:异步组件的使用教程VUE3开发基础:异步组件的使用教程Jun 15, 2023 pm 11:33 PM

Vue3是Vue.js最新的主要版本,与Vue2相比有许多新的功能和改进。其中一个最突出的改进之一是异步组件的使用。在本文中,我们将深入探讨Vue3中异步组件的使用方法和技巧。什么是异步组件?在Vue中,组件可以通过import语句或require函数引入。这些组件被称为同步组件,它们的代码在应用程序启动时被立即加载并编译。但是,当应用程序变得越来越大

vue为啥要使用异步组件vue为啥要使用异步组件Dec 13, 2022 pm 07:11 PM

使用异步组件的原因:1、异步组件可以减少打包的结果,会将异步组件分开打包,会采用异步的方式加载组件,可以有效的解决一个组件过大的问题。2、异步组件的核心可以给组件定义变成一个函数,函数里面可以用import语法,实现文件的分割加载。

如何通过Vue的异步组件和Webpack的Lazy Loading提升应用性能如何通过Vue的异步组件和Webpack的Lazy Loading提升应用性能Jul 18, 2023 pm 04:42 PM

如何通过Vue的异步组件和Webpack的LazyLoading提升应用性能随着互联网技术的发展,Web应用程序的性能优化一直是开发者关注的重点。在过去,针对Web应用的性能优化主要集中在前端资源的减小和后端接口的优化上。然而,随着Vue.js的流行,通过异步组件和Webpack的LazyLoading可以进一步提升应用性能。Vue是一个轻量级的Java

如何使用Vue的异步组件和Webpack Code Splitting提升应用性能如何使用Vue的异步组件和Webpack Code Splitting提升应用性能Jul 17, 2023 pm 09:21 PM

如何使用Vue的异步组件和WebpackCodeSplitting提升应用性能引言:随着Web应用越来越复杂,页面加载速度和性能成为了开发者关注的焦点。为了提高应用的性能,我们可以利用Vue的异步组件和Webpack的CodeSplitting功能。这两个功能结合起来可以帮助我们减少页面加载时间,提升用户体验。本文将介绍如何使用Vue的异步组件和Web

聊聊Vue2和Vue3中怎么设置404界面聊聊Vue2和Vue3中怎么设置404界面Feb 17, 2023 pm 02:25 PM

本篇文章带大家进行Vue学习,聊聊Vue2和Vue3中设置404界面的方法,希望对大家有所帮助!

vue中异步组件和动态组件的区别是什么vue中异步组件和动态组件的区别是什么Aug 26, 2022 pm 06:32 PM

区别:1、动态组件是Vue中一个特殊的Html元素“<component>”,它拥有一个特殊的is属性,属性值可以是“已注册组件的名称”或“一个组件的选项对象”;而异步组件不是实物,是一个概念,一个可以让组件异步加载的方式。2、动态组件用于不同组件之间进行动态切换;而异步组件用于性能优化,比如减小首屏加载时间、加载资源大小。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具