文章目录

一、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数组的前面一位。


总结

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

Logo

前往低代码交流专区

更多推荐