Open Samgao0312 opened 2 years ago
官方文档
keep-alive 是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。 keep-alive 是 vue 内置的组件,用 keep-alive 包裹组件时,会 缓存 不活动的组件实例,而 不是销毁他们。 keep-alive 主要用于保存组件状态或避免重复创建 重复渲染导致的性能问题。 keep-alive 可以设置以下props属性:
注意:include 和 exclude 首先检查组件的 name 属性,如果 name 不可用,则匹配局部注册名称。匿名组件不能被匹配。
name
created
mounted
// 1 动态组件(所谓动态组件就是让多个组件使用同一个挂载点,并动态切换。) <keep-alive> <component is="currentComponent"></component> </keep-alive> // 2 多个条件判断的子组件 <keep-alive> <comp-a v-if="true"></comp-a> <comp-b v-else></comp-b> </keep-alive> // 3 transition <transition> <keep-alive> <component is="currentComponent"></component> </keep-alive> </transition> // 4 结合vue-router <keep-alive> <router-view></router-view> </keep-alive>
https://vue3js.cn/interview/vue/keepalive.html#%E4%B8%89%E3%80%81%E5%8E%9F%E7%90%86%E5%88%86%E6%9E%90
是什么
keep-alive 是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。 keep-alive 是 vue 内置的组件,用 keep-alive 包裹组件时,会 缓存 不活动的组件实例,而 不是销毁他们。 keep-alive 主要用于保存组件状态或避免重复创建 重复渲染导致的性能问题。 keep-alive 可以设置以下props属性:
特点
created
、mounted
生命周期钩子函数。使用场景
原理分析
https://vue3js.cn/interview/vue/keepalive.html#%E4%B8%89%E3%80%81%E5%8E%9F%E7%90%86%E5%88%86%E6%9E%90
参考阅读