Vue异步组件Demo
Vue异步组件Demo
在大型应用中，我们可能需要将应用拆分为多个小模块，按需从服务器下载。为了进一步简化，Vue.js 允许将组件定义为一个工厂函数，异步地解析组件的定义。Vue.js 只在组件需要渲染时触发工厂函数，并且把结果缓存起来，用于后面的再次渲染。
下面是我写的一个简单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
}
}
}
} )
see github
原文地址：https://segmentfault.com/a/1190000012561857
Vue异步组件Demo的更多相关文章
- vue项目实现按需加载的3种方式：vue异步组件技术、es提案的import()、webpack提供的require.ensure()
1. vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载. 但是,这种情况下一个组件生成一个js文件. 举例如下: { path: '/promisedemo ...
- route按需加载的3种方式：vue异步组件、es提案的import()、webpack的require.ensure()
1. vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载. 但是,这种情况下一个组件生成一个js文件.举例如下: { path: '/promisedemo' ...
- 揭开Vue异步组件的神秘面纱
简介 在大型应用里,有些组件可能一开始并不显示,只有在特定条件下才会渲染,那么这种情况下该组件的资源其实不需要一开始就加载,完全可以在需要的时候再去请求,这也可以减少页面首次加载的资源体积,要在Vue ...
- vue异步组件？
为了简化,Vue 允许你以一个工厂函数的方式定义你的组件,这个工厂函数会异步解析你的组件定义.Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数,且会把结果缓存起来供未来重渲染Vue.compo ...
- VUE的组件DEMO
组件的基本写法可以如下: HTML: <div id="components-demo"> <button-counter self-data="thi ...
- Vue动态注册异步组件（非同一个工程的组件）
前言:最近在掘金逛的时候,无意中看到前滴滴前端架构黄轶大佬,看到了大佬分享的一篇博客滴滴 webapp 5.0 Vue 2.0 重构经验分享 ,对于其中第5个问题(异步加载的业务线组件,如何动态注册? ...
- vue路由异步组件案例
最近研究了vue性能优化,涉及到vue异步组件.一番研究得出如下的解决方案. 原理:利用webpack对代码进行分割是异步调用组件前提.异步组件在优先级上让位同步组件.下面介绍的是怎么实现异步组件. ...
- vue深入了解组件——动态组件&异步组件
一.在动态组件上使用 keep-alive 我们之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件: <component v-bind:is="currentTabComp ...
- Vue动态组件&异步组件
在动态组件上使用keep-alive 我们之前曾经在一个多标签的界面中使用is特性来切换不同的组件: Vue.js的动态组件模板 <component v-bind:is="curre ...
随机推荐
- webpack——entry，output,plugins,loader,chunk知识
entry:打包入口 代码的入口,找到依赖模块 打包的入口,webpack去哪个文件找依赖,或是去那个文件依赖的依赖 可以是一个或者多个入口 例如: 1.module.exports={ entry: ...
- for循环+setTimeout的延迟操作
例子: for (var i = 0; i < 5; i++) { setTimeout(function () { console.log(i); }, 100) } 上述代码,输出结果显而易 ...
- 【bzoj 1502】月下柠檬树
月下柠檬树 题意 求n个圆与他们的公切线的定积分. 解法 求出圆的公切线就可以了. 特别坑的一点 : 最两端的圆,有可能会被其他的圆所包含,所以要重新求一下最左端与最右端. 比较坑的一点 : 精度要设 ...
- vue 根据下拉框动态切换form的rule
taskCategorySelect (val) { // 任务类别下拉选择 if ( val == 5 ) { this.cameraORgateway = false; // true不可以使用 ...
- python 添加自定义库
首先,写一个库文件aaa.py 格式,在python安装目录下面创建一个空的文件夹命名Function 或者其他文件名, 然后将文件保存在python 安装目录下面的一个Function文件夹下面. ...
- tomcat闪退无法启动 the catalina_home environment variable is not defined correctly this environment variable is needed to run this program
未成功配置CATALINA_HOME 1.计算机>属性>环境变量, 新建环境变量.变量名为CATALINA_HOME ,变量值tomcat的解压目录,注意后面不用多加“\”或者“;” 2. ...
- 在Action中获取servlet API
Struts2的Action组件是不依赖servlet API 的.那么当你在action中的业务需要处理HttpServletRequest和HttpServletResponse的时候(比如要对响 ...
- (转)Linux内核 TCP/IP、Socket参数调优
Doc1: /proc/sys/net目录 所有的TCP/IP参数都位于/proc/sys/net目录下(请注意,对/proc/sys/net目录下内容的修改都是临时的,任何修改在系统重启后都会丢失) ...
- ASP.NET-未解决的问题
001.((FormsIdentity)User.Identity).Ticket.UserData 用ASP.NET后台格式化成json数据后传回去的数据有"这样的符号 002.HT ...
- 闲来无事爬了下通讯录 试手 jsdom
curl http://xxx.com/address/addresslist\?search\=%40 --cookie oa_cookie=123 -s| node parss .js js 代码 ...