keep-alive的深入理解与使用(配合router-view缓存整个路由页面)
原文链接: 点我
在搭建 vue 项目时,有某些组件没必要多次渲染,所以需要将组件在内存中进行‘持久化’,此时 <keep-alive>
便可以派上用场了。 <keep-alive>
可以使被包含的组件状态维持不变,即便是组件切换了,其内的状态依旧维持在内存之中。在下一次显示时,也不会重现渲染。
PS:
<keep-alive>
与<transition>
相似,只是一个抽象组件,它不会在DOM树中渲染(真实或者虚拟都不会),也不在父组件链中存在,比如:你永远在this.$parent
中找不到keep-alive
。
1.keep-alive的基础使用
最基础的一般是结合动态组件去使用:
<keep-alive> <component :is="currentView"></component> </keep-alive> new Vue({ el: '#app', data(){ return { currentView: Test //Test为引入的子组件 } } })
2.生命周期钩子不过此种方式并无太大的实用意义。
被包含在 <keep-alive>
中创建的组件,会多出两个生命周期的钩子: activated
与 deactivated
- activated
在组件被激活时调用,在组件第一次渲染时也会被调用,之后每次keep-alive激活时被调用。
- deactivated
在组件被停用时调用。
注意:只有组件被
keep-alive
包裹时,这两个生命周期才会被调用,如果作为正常组件使用,是不会被调用,以及在2.1.0
版本之后,使用exclude
排除之后,就算被包裹在keep-alive
中,这两个钩子依然不会被调用!另外在服务端渲染时此钩子也不会被调用的。
3.配合router-view使用
有些时候可能需要将整个路由页面一切缓存下来,也就是将 <router-view>
进行缓存。这种使用场景还是蛮多的。
在vue 2.1.0
之前,大部分是这样实现的:
<!-- template --> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> //router配置 new Router({ routes: [ { name: 'a', path: '/a', component: A, meta: { keepAlive: true } }, { name: 'b', path: '/b', component: B } ] })
这样配置路由的路由元信息之后,a路由的 $route.meta.keepAlive
便为 true
,而b路由则为 false
。
所以为 true
的将被包裹在 keep-alive
中,为 false
的则在外层。这样a路由便达到了被缓存的效果,如果还有想要缓存的路由,只需要在路由元中加入 keepAlive: true
即可。
4.在2.1.0版本之后
在vue 2.1.0
版本之后,keep-alive
新加入了两个属性: include
(包含的组件缓存生效) 与 exclude
(排除的组件不缓存,优先级大于include) 。
include
和 exclude
属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。
当使用正则或者是数组时,一定要使用 v-bind
!
<!-- 逗号分隔字符串,只有组件a与b被缓存。这样使用场景变得更有意义了 --> <keep-alive include="a,b"> <component :is="view"></component> </keep-alive> <!-- 正则表达式 (需要使用 v-bind,符合匹配规则的都会被缓存) --> <keep-alive :include="/a|b/"> <component :is="view"></component> </keep-alive> <!-- Array (需要使用 v-bind,被包含的都会被缓存) --> <keep-alive :include="['a', 'b']"> <component :is="view"></component> </keep-alive>
有了include之后,再与 router-view
一起使用时便方便许多了:
<!-- 一个include解决了,不需要多写一个标签,也不需要在路由元中添加keepAlive了 --> <keep-alive include='a'> <router-view></router-view> </keeo-alive>
4.需要注意的地方
<keep-alive>
先匹配被包含组件的name
字段,如果name
不可用,则匹配当前组件componetns
配置中的注册名称。<keep-alive>
不会在函数式组件中正常工作,因为它们没有缓存实例。- 当匹配条件同时在
include
与exclude
存在时,以exclude
优先级最高(当前vue 2.4.2 version)。比如:包含于排除同时匹配到了组件A,那组件A不会被缓存。 - 包含在
<keep-alive>
中,但符合exclude
,不会调用activated
和deactivated
。
以上,致那颗骚动的心……
原文地址:https://www.cnblogs.com/myfate/p/11698219.html
- 洛谷P1420 最长连号
- 各种读入方式速度比较
- 美团NLP实习面试总结一 基本知识4 数据结构二 NLP相关技术1 LSTM2 介绍实体链接与实体映射3 解释随机游走的原理及作用4 命名实体识别
- 【下载】苹果发布Turi Create机器学习框架,5行代码开发图像识别
- codevs 4163 hzwer与逆序对
- ASP.NET Core提供模块化Middleware组件
- CSS预处理器的对比 — sass、less和stylus
- Gensim实现Word2Vec的Skip-Gram模型简介快速上手对语料进行分词使用gensim的word2vec训练模型
- React第三方组件4(状态管理之Reflux的使用②TodoList上)
- 机器学习(六)Sigmoid函数和Softmax函数1 Sigmoid函数2 Softmax函数
- React第三方组件4(状态管理之Reflux的使用①简单使用)
- React第三方组件3(状态管理之Flux的使用⑤异步操作)
- 使用yo-get下载视频网站视频或其
- React多页面应用3(webpack4 多页面实现)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Docker使用手册 嵌入式Linux环境搭建
- Activiti7 流程部署
- Activiti7 启动流程实例
- linux文本处理工具及正则表达式
- linux目录结构及文件管理
- centos7-httpd虚拟主机
- k8s1.13.0二进制部署-node节点(四)
- k8s1.13.0二进制部署-flannel网络(二)
- k8s1.13.0二进制部署-master节点(三)
- k8s1.13.0二进制部署-ETCD集群(一)
- docker-企业级镜像仓库harbor
- docker-Dockerfile
- kubernetes-身份与权限认证(十四)
- kubernetes-控制器statefulset和Job(十三)
- kubernetes-存储卷(十二)