vue中keep-alive的详细讲解（建议收藏）
一、Keep-alive 是什么
keep-alive是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM
keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
keep-alive可以设置以下props属性：
include - 字符串或正则表达式。只有名称匹配的组件会被缓存
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存
max - 数字。用于指定缓存组件的最大数量，超过这个数量时，最久未被访问的组件会被移除。
-
状态保留：在组件切换过程中，保留组件的状态和数据。
-
性能优化：通过避免不必要的重新渲染，提高应用性能。
-
生命周期钩子：提供了activated和deactivated两个生命周期钩子，方便开发者在组件激活和停用时执行特定操作。
关于keep-alive的基本用法
<keep-alive>
<component :is="view"></component>
</keep-alive>
使用includes和exclude：
<keep-alive include="a,b">
<component :is="view"></component>
</keep-alive>
<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
<component :is="view"></component>
</keep-alive>
<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
<component :is="view"></component>
</keep-alive>
匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)，匿名组件不能被匹配
设置了 keep-alive 缓存的组件，会多出两个生命周期钩子（activated与deactivated）：
-
首次进入组件时：beforeRouteEnter > beforeCreate > created> mounted > activated > ... ... > beforeRouteLeave > deactivated
-
再次进入组件时：beforeRouteEnter >activated > ... ... > beforeRouteLeave > deactivated
二、使用场景
使用原则：当我们在某些场景下不需要让页面重新加载时我们可以使用keepalive
举个栗子:
当我们从首页–>列表页–>商详页–>再返回，这时候列表页应该是需要keep-alive
从首页–>列表页–>商详页–>返回到列表页(需要缓存)–>返回到首页(需要缓存)–>再次进入列表页(不需要缓存)，这时候可以按需来控制页面的keep-alive
在路由中设置keepAlive属性判断是否需要缓存
- 路由组件：在多页面切换时，保留用户的输入和页面状态。
- 动态组件：在频繁切换的动态组件中，避免重复加载和初始化。
- 表单：在表单页面切换时，保留用户输入的数据。
{
path: 'list',
name: 'itemList', // 列表页
component(resolve) {
require(['@/pages/item/list'], resolve)
},
meta: {
keepAlive: true,
title: '列表页'
}
}
使用
<div id="app" class='wrapper'>
<keep-alive>
<!-- 需要缓存的视图组件 -->
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<!-- 不需要缓存的视图组件 -->
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
四、缓存后如何获取数据
解决方案可以有以下两种：
-
beforeRouteEnter
-
actived
beforeRouteEnter 每次组件渲染的时候，都会执行beforeRouteEnter
beforeRouteEnter(to, from, next) {
next(vm => {
console.log(vm)
// 每次进入路由执行
vm.getData() // 获取数据
})
},
actived 在keep-alive缓存的组件被激活的时候，都会执行actived钩子
activated() {
this.getData() // 获取数据
}
注意：服务器端渲染期间avtived不被调用
六、性能优化
通过使用keep-alive，可以显著提升应用的性能，尤其是在以下情况下：
- 复杂表单：避免用户在切换页面后丢失表单数据。
- 数据加载：避免重复的数据加载和处理，提高响应速度。
- 动画：在复杂动画场景下，避免重复计算和渲染。
