参数（Props）
-
include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
-
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
-
max - 数字。最多可以缓存多少组件实例
对生命周期函数变化
被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated
1. activated
在 keep-alive 组件激活时调用
2. deactivated
在 keep-alive 组件离开时调用
正常生命周期：beforeRouteEnter --> created --> mounted --> updated -->destroyed
使用keepAlive后生命周期：
首次进入缓存页面：beforeRouteEnter --> created --> mounted --> activated --> deactivated
再次进入缓存页面：beforeRouteEnter --> activated --> deactivated
注：
1、这里的activated非常有用，因为页面被缓存时，created,mounted等生命周期均失效，你若想进行一些操作，那么可以在activated内完成(下面会举个栗子：列表页回到上次浏览位置)
2、activated keep-alive组件激活时调用，该钩子在服务器端渲染期间不被调用。
3、deactivated keep-alive组件停用时调用，该钩子在服务端渲染期间不被调用。
缓存整个项目
在 App.vue 里面
如果需要缓存整个项目，则如下设置(直接包裹根router-view即可)：
使用keepAlive后生命周期发生了哪些变化
结合Router，缓存部分页面
1、在App.vue中设置：（根据是否需要缓存切换模式）
2、在router.js路由页设置：
new Router({
mode: ‘history’,
routes: [
{
path: ‘/’,
name: ‘home’,
component: Home,
redirect: ‘goods’,
children: [
{
path: ‘goods’,
name: ‘goods’,
component: Goods,
meta: {
keepAlive: false // 不需要缓存
}
},
{
path: ‘ratings’,
name: ‘ratings’,
component: Ratings,
meta: {
keepAlive: true // 需要缓存
}
},
{
path: ‘seller’,
name: ‘seller’,
component: Seller,
meta: {
keepAlive: true // 需要缓存
}
}
]
}
]
})
注：
配置了keepAlive的页面，在再次进入时不会重新渲染，该页面内的组件同理不会再次渲染。而这可能会导致该组件内的相关操作（那些每次都需要重新渲染页面的操作：如父子组件间的传值）不再生效。 这一点可能会导致一些莫名其妙而又无从查证的bug
使用新增属性include/exclude,缓存部分页面
vue2.1.0 新增了include，exclude俩个属性，允许组件有条件的缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
最后
一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。
分享一些简单的前端面试题以及学习路线给大家，狂戳这里即可免费领取
/13/H4lCoPEF.jpg" />
最后
一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。
分享一些简单的前端面试题以及学习路线给大家，狂戳这里即可免费领取
[外链图片转存中…(img-Dpb12zFo-1712225153210)]
扫一扫
1046
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
