您的当前位置：首页在Vue中有关于异步组件的示例

在Vue中有关于异步组件的示例

来源：意榕旅游网

大家都知道当使用时才装入需要的组件，可以有效的提高首次装入页面的速度。比如在路由切换时，下面这篇文章主要给大家介绍了关于如何实现一个简单的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 === '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>
 <p id="app" style="font-size: 22px">
 <!-- 异步组件async-comp -->
 <async-comp :list="['我是一个异步组件，','如果加载完成，','我就会在这里显示']"></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: '\
 <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
 }
 }
 }
} )

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

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

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

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

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

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