vue深入了解组件——动态组件&异步组件
一、在动态组件上使用 keep-alive
我们之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件:
<component v-bind:is="currentTabComponent"></component>
当在这些组件之间切换的时候,你有时会想保持这些组件的状态,以避免反复重渲染导致的性能问题。例如我们来展开说一说这个多标签界面:
你会注意到,如果你选择了一篇文章,切换到Archive标签,然后再切换回 Posts,是不会继续展示你之前选择的文章的。这时因为你每次切换新标签的时候,Vue都创建了一个新的 currentTabComponent 实例。
重新创建动态组件的行为通常是非常有用的,但是在这个案例中,我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题,我们可以用一个 <keep-alive> 元素将其动态组件包裹起来。
我们看看修改后的结果:
现在这个Posts标签保持了它的状态(被选中的文章) 甚至当它未被渲染时也是如此。你也可在这个fiddle查阅到完整的代码。
注意:这个 <keep-alive> 要求被切换到的组件都有自己的名字,不论是通过组件的 name 选项还是局部/全部注册。
你可以在 API参考文档查阅更多关于 <keep-alive> 的细节。
二、异步组件
在大型应用中,我们可能需要将应用分割成小一些的代码块,并且只在需要的时候才从服务器加载一个模块。为了简化,Vue允许你以一个工厂函数的方式定义你的组件,这个工厂函数会异步解析你的组件定义。Vue只有在这个组件需要被渲染的时候才会触发该工厂函数,且会把结果缓存起来供未来重渲染。例如:
Vue.component('async-example', function (resolve, reject) { setTimeout(function () { // 向 `resolve` 回调传递组件定义 resolve({ template: '<div>I am async!</div>' }) }, 1000) })
如你所见,这个工厂函数会收到一个 resolve 回调,这个回调函数会在你从服务器得到组件定义的时候被调用。你也可以调用 reject(reason) 来表示加载失败。这里的 setTimeout 是为了演示用的,如何获取组件取决于你自己。一个推荐的做法是将异步组件和webpack 的code-splitting功能一起配合使用:
Vue.component('async-webpack-example', function (resolve) { // 这个特殊的 `require` 语法将会告诉 webpack // 自动将你的构建代码切割成多个包,这些包 // 会通过 Ajax 请求加载 require(['./my-async-component'], resolve) })
你也可以在工厂函数中返回一个 Promise,所以把 webpack2 和 ES2015 语法加在一起,我们可以写成这样:
Vue.component( 'async-webpack-example', // 这个 `import` 函数会返回一个 `Promise` 对象。 () => import('./my-async-component') )
当使用局部注册的时候,你也可以直接提供一个返回 Promise 的函数:
new Vue({ // ... components: { 'my-component': () => import('./my-async-component') } })
如果你是一个 Browserify用户同时喜欢使用异步组件,很不幸这个工具的作者明确表示异步加载"并不会被Browserify支持",至少官方不会。Browserify社区已经找到了一些变通方案,这些方案可能会对已存在的复杂应用有帮助。对于其他的场景,我们推荐直接使用webpack,以拥有内建的被作为第一公民的异步支持。
2.2处理加载状态
2.3.0+新增
这里的异步组件工厂函数也可以返回一个如下格式的对象:
const AsyncComponent = () => ({ // 需要加载的组件 (应该是一个 `Promise` 对象) component: import('./MyComponent.vue'), // 异步组件加载时使用的组件 loading: LoadingComponent, // 加载失败时使用的组件 error: ErrorComponent, // 展示加载时组件的延时时间。默认值是 200 (毫秒) delay: 200, // 如果提供了超时时间且组件加载也超时了, // 则使用加载失败时使用的组件。默认值是:`Infinity` timeout: 3000 })
注意:如果你希望在Vue Router 的路由组件中使用上述语法的话,你必须使用 Vue Router 2.4.0+版本。
vue深入了解组件——动态组件&异步组件的更多相关文章
- Vue动态注册异步组件(非同一个工程的组件)
前言:最近在掘金逛的时候,无意中看到前滴滴前端架构黄轶大佬,看到了大佬分享的一篇博客滴滴 webapp 5.0 Vue 2.0 重构经验分享 ,对于其中第5个问题(异步加载的业务线组件,如何动态注册? ...
- Vue 组件5 高级异步组件
自2.3.0起,异步组件的工厂函数也可以返回一个如下的对象. const AsyncComp = () => ({ // 需要加载的组件. 应当是一个 Promise component: im ...
- vue 父到子动态传值 子组件实时渲染
近期项目中需要一个功能,根据选择不同的 团队片区 id 展示不同的数据,团队id 在父组件 数据在子组件中展示. 根据不同的团队 动态渲染数据总览. 父组件: <Cards ref=" ...
- Vue动态加载异步组件
背景: 目前我们项目都是按组件划分的,然后各个组件之间封装成产品.目前都是采用iframe直接嵌套页面.项目中我们还是会碰到一些通用的组件跟业务之间有通信,这种情况下iframe并不是最好的选择,if ...
- Vue加载组件、动态加载组件的几种方式
https://cn.vuejs.org/v2/guide/components.html https://cn.vuejs.org/v2/guide/components-dynamic-async ...
- Vue.js 源码分析(二十七) 高级应用 异步组件 详解
当我们的项目足够大,使用的组件就会很多,此时如果一次性加载所有的组件是比较花费时间的.一开始就把所有的组件都加载是没必要的一笔开销,此时可以用异步组件来优化一下. 异步组件简单的说就是只有等到在页面里 ...
- vue3 + vite实现异步组件和路由懒加载
在 Vue2 中,异步组件和路由懒加载处理使用 import 就可以很轻松实现.但是在Vue 3.x 中异步组件的使用与 Vue 2.x 完全不同了.本文就详细讲讲vue3中异步组件和路由懒加载的实现 ...
- React(17)异步组件
26.异步组件当在React里使用异步组件时,核心知识是两个: webpack 如何异步加载其他模块:通过 require(['xxx'], function(module){})来实现:React ...
- vue3.x异步组件
在大型应用中,我们可能需要将应用分割成小一些的代码块,并且只在需要的时候才从服务器加载一个模块 vue2.x 曾经简单的异步组件 components: { AsyncComponent: () =& ...
随机推荐
- 使用ioctl获取网卡统计信息
ethtool -S获取接口统计信息总共分三步: 1.获取统计项个数,使用SIOCETHTOOL+ETHTOOL_GSSET_INFO 2.(可选)获取统计项名字,使用SIOCETHTOOL+ETHT ...
- SVN、Git设置提交时忽略的文件
个人正在使用的:global-ignores = *.o *.lo *.la *.al .libs *.so *.so.[0-9]* *.pyc *.pyo [Tt]humbs.db [Bb]in [ ...
- 五、概念数据模型(CDM生成LDM,PDM和OOM)
概念数据模型 概念数据模型(Conceptual Data Model,CDM):表达的是数据整体逻辑结构,该结构独立于任何软件和数据存储结构,即它只是系统分析人员,应用程序设计人员,维护人员和用 ...
- 前端基础之CSS快速入门
前一篇写了我们的Html的常用组件,当然那些组件在我们不去写样式的时候都是使用的浏览器的默认样式,可以说是非常之丑到爆炸了,我们肯定是不能让用户去看这样丑到爆炸的样式,所以我们在这里需要使用css样式 ...
- PHP解析xml文件时报错:I/O warning : failed to load external entity
在代码顶部增加 libxml_disable_entity_loader(false); libxml_disable_entity_loader()作用是设置是否禁止从外部加载XML实体,设为tru ...
- 锁定“嵌入式AI”应用 中科创达启动第二轮成长
Thundersoft|中科创达软件股份有限公司 http://www.thundersoft.com/index.php 原文:http://tech.hexun.com/2017-08-29/1 ...
- 【Spring学习笔记-MVC-10】Spring MVC之数据校验
作者:ssslinppp 1.准备 这里我们采用Hibernate-validator来进行验证,Hibernate-validator实现了JSR-303验证框架支持注解风格的验证.首先 ...
- 【Spring实战-3】Spring整合Hibernate、Struts
作者:ssslinppp 1. 摘要 版本: Spring4.0.4:Hibernate4.3.5:struts2.3.16: 主要介绍了如下内容: 项目结构的规划: Spring下整合Hi ...
- Qt Creator 预览QtCreator中的界面
当在QtCreator界面编辑器中放置好布局和控件之后,组合键 Alt + Shift + R 可以实现预览功能. 也可以通过以下方式更改快捷键: 具体路径 ...
- js阻止默认事件、拖拽等等
1.自定义右键菜单: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> &l ...