| 学习路线指引（点击解锁） | 知识定位 | 人群定位 |
|---|---|---|
| 李 Python实战微信订餐小程序 李 | 进阶级 | 本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。 |
| Python量化交易实战 | 入门级 | 手把手带你打造一个易扩展、更安全、效率更高的量化交易系统 |
- 1、通过本文可以了解到vue3 keepalive功能
- 2、通过本文可以了解到vue3 keepalive使用场景
- 3、通过本文可以学习到vue3 keepalive真实的使用过程
- 4、通过本文可以学习vue3 keepalive源码调试
- 5、通过本文可以学习到vue3 keepalive源码的精简分析
- keepalive是vue3中的一个全局组件
- keepalive 本身不会渲染出来，也不会出现在dom节点当中，但是它会被渲染为vnode,通过vnode可以跟踪到keepalive中的cache和keys，当然也是在开发环境才可以，build打包以后没有暴露到vnode中（这个还要再确认一下）
- keepalive 最重要的功能就是缓存组件
- keepalive 通过LRU缓存淘汰策略来更新组件缓存，可以更有效的利用内存，防止内存溢出,源代码中的最大缓存数max为10，也就是10个组件之后，就开始淘汰最先被缓存的组件了
- 这里先假设一个场景： A页面是首页=> B页面列表页面（需要缓存的页面）===> C 详情页
由C详情页到到B页面的时候，要返回到B的缓存页面，包括页面的基础数据和列表的滚动条位置信息
如果由B页面返回到A页面，则需要将B的缓存页清空 - 上述另外一个场景：进入页面直接缓存，然后就结束了，这个比较简单本文就不讨论了
-
keepalive组件总共有三个参数
- include：可传字符串、正则表达式、数组，名称匹配成功的组件会被缓存
- exclude：可传字符串、正则表达式、数组，名称匹配成功的组件不会被缓存
- max：可传数字，限制缓存组件的最大数量,默认为10
-
首先在App.vue根代码中添加引入keepalive组件，通过这里可以发现，我这里缓存的相当于整个页面，当然你也可以进行更细粒度的控制页面当中的某个区域组件
keep-alive> router-view>