Keep-Alive源码简单的讲解
官方介绍
keep alive
props:
- include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
- exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
- max - 数字。最多可以缓存多少组件实例。
用法:
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和transition 相似, keep-alive是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。
当组件在 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
主要用于保留组件状态或避免重新渲染。
特性
-
只能包裹一个直属子组件,不能使用v-for -
2.1.0新增,include和exclude条件缓存
keep-alive
<keep-alive>包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和<transition>相似,<keep-alive>是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在组件的父组件链中。
当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
在 2.2.0 及其更高版本中,
activated和deactivated将会在<keep-alive>树内的所有嵌套组件中触发。
主要用于保留组件状态或避免重新渲染。
keep-alive组件
keep-alive是一个抽象组件, 使用keep-alive包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。
keep-alive不仅仅是能够保存页面/组件的状态这么简单,它还可以避免组件反复创建和渲染,有效提升系统性能。总的来说,keep-alive用于保存组件的渲染状态。
以上就是我对vue-Keep-Alive简单的认识