vue中keepalive怎么理解？---vue中文社区
vue中keepalive怎么理解？
说在前面: keep-alive是vue源码中实现的一个组件, 感兴趣的可以研究源码 https://github.com/vuejs/vue/blob/dev/src/core/components/keep-alive.js
什么是keepalive
我们平时开发中, 总有部分组件没有必要多次init, 我们需要将组件进行持久化，使组件状态维持不变，在下一次展示时， 也不会进行重新init
keepalive音译过来就是保持活着, 所以在vue中我们可以使用keepalive来进行组件缓存
基本使用
// 被keepalive包含的组件会被进行缓存<keep-alive><component /></keep-alive>
上面提到被keepalive包含的组件不会被再次init，也就意味着不会重走生命周期函数, 但是平常工作中很多业务场景是希望我们缓存的组件在再次渲染的能做一些事情,vue为keepalive提供了两个额外的hook
activated 当keepalive包含的组件再次渲染的时候触发
deactivated 当keepalive包含的组件销毁的时候触发
注: 2.1.0 版本后keepalive包含但被exclude排除的组件不会有以上两个hook
参数
keepalive可以接收3个属性做为参数进行匹配对应的组件进行缓存
include 包含的组件
exclude 排除的组件
max 缓存组件的最大值
其中include,exclude可以为字符，数组，以及正则表达式
max 类型为字符或者数字
代码理解
// 只缓存组件name为a或者b的组件<keep-alive include="a,b"><component :is="currentView" /></keep-alive>// 组件名为c的组件不缓存<keep-alive exclude="c"><component :is="currentView"/></keep-alive>// 如果同时使用include,exclude,那么exclude优先于include， 下面的例子也就是只缓存a组件<keep-alive include="a,b" exclude="b"><component :is="currentView"/></keep-alive>// 如果缓存的组件超过了max设定的值5，那么将删除第一个缓存的组件<keep-alive exclude="c" max="5"><component :is="currentView"/></keep-alive>
配合router使用
<!-- template -->// 意思就是$router.meta.keepAlive值为真是将组件进行缓存<keep-alive><router-view v-if="$router.meta.keepAlive"></router-view></keep-alive><router-view v-if="!$router.meta.keepAlive"></router-view>//router配置new Router({routes: [{name: 'a',path: '/a',component: A,meta: {keepAlive: true}},{name: 'b',path: '/b',component: B}]})
总结
keepalive是一个抽象组件，缓存vnode，缓存的组件不会被mounted，为此提供activated 和 deactivated 钩子函数, 使用props max 可以控制缓存组件个数
最新文章
- 个人学习记录2：ajax跨域封装
- POJ1191 棋盘分割（DP）
- SQL isnull函数
- 在阿里云服务器ubuntu14.04运行netcore
- android 休眠唤醒机制分析(二) — early_suspend
- Robotium API -- 判断测试结果的方法assert、is、search
- 爬虫(Spider)，反爬虫(Anti-Spider)，反反爬虫(Anti-Anti-Spider)
- java设计模式------建造者模式
- Tomcat8源码笔记(五)组件Container分析
- CPP相关的常见错误（更新ing）
- ConcurrentModificationException 集合并发修改异常 解决
- 【oracle】入门学习（一）
- 在CentOS Linux下部署Activemq 5
- 今天练手了下mysqlbinlog，标记下
- Android 系统服务一览表
- 转： Eclipse设置、调优、使用 （强烈推荐）
- js正则表达式——元字符
- Python爬虫入门（6）：Cookie的使用
- Flume NG初次使用
- jQuery获取所有父级元素及同级元素及子元素的方法