keep-alive你了解多少?
文章目录一、keep-alive是什么?二、keep-alive属性三、实现原理总结一、keep-alive是什么?keep-alive的是vue的一个内置实例,通过这个属性可以缓存的组建的v-node。这样做有什么用呢?1.当你在对组件的反复切换的时候,去复用缓存的v-node,可以提高页面的渲染效率2.可以防止在组件的切换的时候导致组件状态变化。二、keep-alive属性ke.
文章目录
- 一、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数组的前面一位。
总结
上问内容属于个人理解,如果有哪些理解的不到位的地方,还请大佬评论指点一下。
更多推荐
所有评论(0)