Vue核心知识：KeepLive全方位分析
KeepAlive 是 Vue 组件中的一个重要功能，主要用于缓存组件，以提升性能和用户体验。https://i-blog.csdnimg.cn/direct/11a57fafa10042fc8bcd0cc1dd4e293c.png
https://i-blog.csdnimg.cn/direct/a959631efadc41ef9f9a038af53b9e88.png
一、KeepAlive 根本概念
KeepAlive 是 Vue 内置的一个抽象组件，通常用于包裹动态组件，使其在切换时保持状态，而不是被烧毁和重新创建。
主要作用：
[*]缓存组件，制止重复创建和烧毁，提升性能。
[*]保持组件状态，例如表单填写、用户滚动位置等不会丢失。
[*]实用于router-view和component动态组件。
基础使用示例：
<template>
<keep-alive>
<component :is="currentView"></component>
</keep-alive>
</template>
<script>
import A from "./A.vue";
import B from "./B.vue";
export default {
data() {
return {
currentView: "A"
};
},
components: { A, B }
};
</script>
在上述代码中，<component :is="currentView">会根据currentView的值动态切换组件，但由于keep-alive的存在，被切换出去的组件不会被烧毁，而是被缓存。
二、KeepAlive 的核心原理
[*] 组件挂载与缓存
[*]Vue 在创建组件时，会判断是否被 KeepAlive 包裹，如果是，则不会烧毁，而是将其存储在 cache 对象中。
[*]当组件被切换回来时，会从 cache 取出，而不会重新创建实例。
[*] 缓存管理
[*]KeepAlive 组件通过 include 和 exclude 规则控制哪些组件必要缓存，哪些不必要。
[*] 生命周期钩子
[*]activated()：组件被缓存后激活时触发。
[*]deactivated()：组件被缓存但切换出去时触发。
三、KeepAlive 关键属性解析
1. include：指定必要缓存的组件
可以是字符串、正则表达式或数组：
<keep-alive :include="['A', 'B']">
<router-view></router-view>
</keep-alive>
如许只有 A 和 B 组件会被缓存。
2. exclude：指定不必要缓存的组件
<keep-alive :exclude="/^Temp/">
<router-view></router-view>
</keep-alive>
全部以 Temp 开头的组件都不会被缓存。
3. max：最大缓存组件数
<keep-alive :max="2">
<router-view></router-view>
</keep-alive>
最多缓存 2 个组件，超事后会删除最久未使用的组件。
四、KeepAlive 生命周期
组件被 keep-alive 缓存时，不会触发 created、mounted，但会触发以下钩子：
[*]activated()：组件从缓存中激活
[*]deactivated()：组件被缓存但未烧毁
示例：
<script>
export default {
created() {
console.log("组件创建");
},
mounted() {
console.log("组件挂载");
},
activated() {
console.log("组件被激活");
},
deactivated() {
console.log("组件被缓存");
}
};
</script>
生命周期触发次序
[*]初次进入：created → mounted → activated
[*]切换离开：deactivated
[*]再次进入：activated
五、详细使用场景
[*] 配合 router-view，缓存某些路由
<keep-alive>
<router-view></router-view>
</keep-alive>
[*]如许切换路由时，已访问的组件会被缓存。
[*] 联合 include 指定缓存页面
<keep-alive :include="['Home', 'Profile']">
<router-view></router-view>
</keep-alive>
[*]只有 Home 和 Profile 页面会被缓存。
[*] 联合 exclude 过滤不必要缓存的页面
<keep-alive :exclude="['Login']">
<router-view></router-view>
</keep-alive>
[*]Login 页面不会被缓存，其他页面都会缓存。
[*] 动态组件缓存
<keep-alive>
<component :is="currentComponent"></component>
</keep-alive>
[*]切换组件时不会烧毁原组件。
六、常见问题及解决方案
1. activated 和 deactivated 不触发
[*]确保组件确实被 keep-alive 包裹，而且是动态组件。
2. keep-alive 组件缓存过多导致内存占用
[*]使用 max 限制缓存数：<keep-alive :max="3">
<router-view></router-view>
</keep-alive>
3. 怎样手动清除缓存
this.$destroy(); // 清除当前组件缓存
或者
this.$parent.$forceUpdate(); // 强制更新
4. 怎样手动清除 keep-alive 缓存
可以使用 key 逼迫重新渲染：
<keep-alive>
<component :is="currentComponent" :key="currentKey"></component>
</keep-alive>
每次切换 currentKey，都会重新渲染组件。
七、完整示例：联合 Vue Router
<template>
<div>
<button @click="currentView = 'Home'">Home</button>
<button @click="currentView = 'About'">About</button>
<keep-alive>
<component :is="currentView"></component>
</keep-alive>
</div>
</template>
<script>
import Home from "./Home.vue";
import About from "./About.vue";
export default {
data() {
return {
currentView: "Home"
};
},
components: { Home, About }
};
</script>
在这里：
[*]Home 和 About 组件可以自由切换，而且会被 keep-alive 缓存。
八、总结
[*]KeepAlive 主要用于缓存动态组件，制止重复创建和烧毁，提高性能。
[*]关键属性：
[*]include 指定缓存组件。
[*]exclude 排除不必要缓存的组件。
[*]max 限制最大缓存数。
[*]组件生命周期：
[*]activated() 组件被激活
[*]deactivated() 组件被缓存
[*]实用于 router-view 及 component 组件，适合缓存列表、表单、复杂页面状态。
如果在项目中精确使用 KeepAlive，可以大幅提升前端性能，制止页面状态丢失，提高用户体验。
https://img-blog.csdnimg.cn/20210605104633110.gif#pic_center
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]