简单的Vue异步组件实例Demo

时间：2021-05-18

前言

在大型应用中，我们可能需要将应用拆分为多个小模块，按需从服务器下载。为了进一步简化，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>  <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app" style="font-size: 22px">  <async-comp :list="['我是一个异步组件，','如果加载完成，','我就会在这里显示']"></async-comp> </div>  <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

github地址：点击这里

总结

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

简单的Vue异步组件实例Demo

相关文章

Vue异步加载about组件

vue文件树组件使用详解

Vue动态组件和异步组件原理详解

详解VueJs异步动态加载块

Vue动态组件与异步组件实例详解