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: () =& ...
随机推荐
- /etc/inittab 学习
1.文件内容 2.内容讲解 http://www.2cto.com/os/201108/98426.html init的进程号是1(ps -aux | less),从这一点就能看出,init进程是系统 ...
- 在Win7下新建库并修改图标
win7中在库中添加桌面方法详解 1.在空白处,鼠标右键选择新建——库. 2.命名为桌面,然后选择桌面. 3.鼠标右键选择属性. 4.点击包括文件夹. 5.选择桌面,点击包括文件夹按钮. 6.点击确定 ...
- asterisk channel driver dev ref
入口函数load_module load_config ast_channel_register console_tech ast_cli_register_multiple ...
- Sqoop之 Sqoop 1.4.6 安装
1. sqoop数据迁移 1.1 概述 sqoop是apache旗下一款“Hadoop和关系数据库服务器之间传送数据”的工具. 导入数据:MySQL,Oracle导入数据到Hadoop的HDFS.HI ...
- git 报错及解决
报错:fatal: refusing to merge unrelated histories==== 解决办法:git pull加上参数,如:git pull –allow-unrelated-hi ...
- (文章转载)织梦CMS判断不同的栏目显示不同的图片
{dede:php} $thisid = $refObj->Fields['id']; $row = $dsql->GetOne("Select typeid From `ybs ...
- 【Spring-AOP-学习笔记-5】@AfterReturning增强处理简单示例
项目结构 业务代码 @Component("hello") public class HelloImpl implements Hello { // 定义一个简单方法,模拟 ...
- bzoj1825: [JSOI2010]蔬菜庆典
Description Input Output 对于每组数据,输出一行.若蔬菜的总价能无限制增大,输出"+inf"(不含引号).否则输出一个整数,表示所有蔬菜的最大总价. 首 ...
- CentOS 6.6下安装配置Tomcat环境
本文转载至:http://www.linuxidc.com/Linux/2015-08/122234.htm 实验系统:CentOS 6.6_x86_64 实验前提:防火墙和selinux都关闭 实验 ...
- 安装HBase(0.9)数据库
基本知识: 1.hbase是一种基于列存储的数据库,也就是说它的一列的数据是存储在一个文件里面的,而传统的数据库存储都是一个文件存储多个行,这些行有不同的列,这些列的数据类型 不同. 2.基于HDFS ...