简单的Vue异步组件实例Demo
2019/6/27 20:29:39
本文主要是介绍简单的Vue异步组件实例Demo,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
前言
在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载。为了进一步简化,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> <div id="app" style="font-size: 22px"> <!-- 异步组件async-comp --> <async-comp :list="['我是一个异步组件,','如果加载完成,','我就会在这里显示']"></async-comp> </div> <!-- 引入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 } } } } )
github地址:点击这里
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对找一找教程网的支持。
这篇关于简单的Vue异步组件实例Demo的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-07-06vue 新建功能多条数据(还没和后端交互)还能看详情 数据是前端缓存到本地吗?-icode9专业技术文章分享
- 2024-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode