简单的Vue异步组件实例Demo

简单的Vue异步组件实例Demo

前言

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

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

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

按需加载，可以节省首次加载的时间，提高速度，也算是一个性能优化。

那么一个组件可能会被使用多次，按需加载的话也不会加载多次，第一次加载完成就会缓存下来，和webpack是一样的，所以不用担心

最近读Vue文档的时候仔细看了一下异步组件部分，第一次看的时候一脸懵逼，看第二次还是有点迷茫，第三次就有点感觉了，第四次感觉有点明白了，遂记录一下，下面是我写的一个简单Vue异步组件Demo。

实例代码

index.html

content="width=device-width, initial-scale=1.0">

content="ie=edge">

异步组件Async-Comp.js，

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

window.async_comp = {

template: '\

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: '

loading...

},

/* 出现错误时显示的组件 */

error: {

template: '\

load failed!

'

},

/* loading组件的延迟时间 */

delay: 10,

/* 最长等待时间，如果超过此时间，将显示error组件。 */

timeout:3200

}

}

}

} )

github地址：点击这里

总结

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。