keep-alive你了解多少？

文章目录

• 一、keep-alive是什么？
• 二、keep-alive属性
• 三、实现原理
• 总结

一、keep-alive是什么？

keep-alive的是vue的一个内置实例，通过这个属性可以缓存的组建的v-node。这样做有什么用呢？

1.当你在对组件的反复切换的时候，去复用缓存的v-node,可以提高页面的渲染效率

2.可以防止在组件的切换的时候导致组件状态变化。

二、keep-alive属性

keep-alive有三个属性

1.include ：记录的是哪些组件可以被缓存

2.exclude:   记录了哪些组件不能被缓存

3.max: 记录的是可以缓存组件的最大数量

除此之外，keep-alive还提供了两个的生命周期钩子函数

actived: 在激活的时候的使用，第一次激活实在mounted之后执行

dectived:在失活的时候使用。

三、实现原理

keep-alive内部保存了一个key数组和一个组件缓存对象

key数组：记录了缓存v-node的key值，如果说没有key值得话会自动创建一个key值

cache对象：会以key为键名，v-node为键值创建一个对象

在渲染得时候会先判断缓存中有没有这个v-node如果有得话直接复用已经缓存，如果没有重新创建。

当切换到该组件得时候会将组件的key在key数组的位置放到最后一位。如果说缓存的数量超过了max最大值，则会删除最上时间没有使用的，也就是key数组的前面一位。

---

总结

上问内容属于个人理解，如果有哪些理解的不到位的地方，还请大佬评论指点一下。