Vue动态组件和异步组件示例的详细说明

本文阐述了Vue的动态组件和异步组件。分享给大家参考，如下：

1在动态组件上使用保活

我们以前使用过is功能在多标签界面中切换不同的组件：

组件v-bind:是=' current tab component '/组件在这些组件之间切换时，您有时希望保持这些组件处于状态，以避免重复重新呈现导致的性能问题。例如，让我们扩展这个多标签界面：

您会注意到，如果选择一篇文章，切换到“归档”选项卡，然后切换回“帖子”，您将不会继续显示之前选择的文章。这是因为每次切换新标签时，Vue都会创建一个新的currentTabComponent实例。

重新创建动态组件的行为通常非常有用，但是在这种情况下，我们希望那些标记的组件实例可以在第一次创建时被缓存。为了解决这个问题，我们可以用保活元素包装它的动态组件。

！-停用的组件将被缓存！-keep-alive组件v-bind:为=' current tabb component '/component/keep-alive。现在这个帖子标签保持它的状态(选中的文章)，即使它没有被渲染。

html:

div id=' dynamic-component-demo ' button v-for=' tab in tab ' v-bind : key=' tab ' v-bind : class='[' tab-button '，{ active : current tab===tab }]' v-: click=' current tab=tab ' { tab } }/button keep-alive component v-bind : is=' current tab component ' class=' tab '/component/keep-alive/div js

Vue.com(' tab-post '，{ data : function(){ return { post 3360[{ id : 1，title : ')618前夕，微信更新了两大支付和电商功能'，content: '本周末，中国消费者即将迎来上半年网购最大高峰，6月17日父亲节和6月18日端午节，这也是JD.COM、天猫等电商公司的618购物节稍微出乎意料但又合情合理的是，中国最大的社交平台微信最近推出了两项与支付和电子商务相关的功能。“}，{id: 2，title: '腾讯将斥资32亿收购开发商《绝地求生》 10%股份'，content: '腾讯与蓝洞接近达成协议，如果交易成功，腾讯将成为蓝洞第二大股东'}，{id: 3，title: '地球的这两只眼睛是真的吗？它形成的原因仍然是个谜。一名俄罗斯男子在乘坐直升机旅行时看到一个巨大的坑洞，途经库页岛(sakhalin island)。地球上有很多洞，所以不应该大惊小怪。但当飞机靠得更近，换个角度看坑时，他惊呆了。这显然是“地球之眼”} ]，selectedPost: null } }，template : ` Div class=' post-tab ' ul class=' post-sidebar ' Li v-for=' post in post ' v-bind : key=' post . id ' v-bind : class=' { selected : post===selected post } ' v-: click=' selected post=post ' { post . title } }/Li/ul Div class=' selected-post-containerVue.component ('tab-archive '，{ template : ' div archive page/div ' })；new Vue({ El : ' # dynamic-component-demo '，data: { currentTab: ' Posts '，tab :[' post '，' Archive'] }，computed : { current tab component : function(){ return ' tab-' this . current tab . tolowercase()；} }});css:tab-button { padd : 6px 10px；边框-左上角-半径： 3px；边框-右上角-半径： 3px；border: 1px固体# ccccursor:指针；背景技术： # f0f 0；保证金-底部：-1px；右边距：-1px；}.tab-button : hover { background : # e0e0e 0；}.tab-button . active { background : # e0e0e 0；}.tab { border: 1px solid # cccpadding: 10px}.post-tab { display : flex；}.帖子-侧栏{最大-宽度： 40 VW；margin : 0；padding: 0 10px 0 0列表样式类型：无；border-right: 1px实心# ccc}.帖子-侧栏Li { white-space : nowrap；文本-overflow:省略号；飞越：隐藏；cursor:指针；}.帖子-侧栏Li : hover { background : # eee；}.帖子-侧栏Li . selected { background : light blue；}.选定后容器{ padding-left : 10px；}.selected-post : first-child { margin-top : 0；填充-top : 0；}效果：

2个异步组件

在大型应用程序中，我们可能需要将应用程序分成更小的代码块，并且只在必要时从服务器加载一个模块。为了简化，Vue允许您将组件定义为异步解析组件定义的工厂函数。Vue只在需要渲染这个组件时才会被触发，结果会被缓存以备将来重新渲染。例如：

Vue。组件(' async-example '，function (resolve，reject){ settimeout(function(){//在此定义组件解析({template: ` div I load异步/div ` }) }，1000)；});如您所见，这个工厂函数将接收一个解析回调，当您从服务器获取组件定义时，将调用该回调。您也可以调用reject(原因)来指示加载失败。这里的SetTimeout是为了演示。如何获得组件取决于您。推荐的做法是将异步组件与webpack的代码拆分功能一起使用：

vue。component(' async-web pack-example '，function(resolve){//这个特殊的require '语法将告诉webpack //自动将您的构建代码切割成多个包。这些包//将需要加载([)。/my-async-component']，resolve)})通过Ajax请求。您也可以在工厂函数中返回Promise，因此通过将webpack 2和ES2015的语法加在一起，我们可以编写如下内容：

vue.component(' async-web pack-example '，//此导入'函数将返回一个Promise '对象。()=import('。/my-async-component '))使用本地注册时，还可以直接提供返回Promise的函数：

Newvue ({//.components 3360 { ' my-component ' 3360()=import('。/my-async-component)} })如果你是Browserify用户，并且喜欢使用异步组件，很遗憾，这个工具的作者明确表示异步加载“不会得到Browserify的支持”，至少官方Browserify社区已经找到了一些变通方法，可能对现有的复杂应用有所帮助。对于其他场景，我们建议直接使用webpack，以第一公民的身份内置异步支持。

处理负载状态

添加了2.3.0

这里的异步组件工厂函数也可以返回以下格式的对象：

Const AsyncComponent=()=({ //要加载的组件(应该是Promise '对象)component: import(')。/mycomponent.vue ')，//component loading:加载异步组件时使用的组件，//component error : error component加载失败时使用的组件，//显示加载过程中组件的延迟时间。默认值为200(毫秒)延迟： 200。//如果提供了超时期限，并且组件加载已经超时，//将使用加载失败时使用的组件。默认值为：` Infinity` timeout: 3000})请注意，如果要在Vue Router的路由组件中使用上述语法，则必须使用Vue Router 2.4.0的2.4.0版本

希望本文对vue.js程序的设计有所帮助。