当前位置：首页 > news >正文

keep-alive

news 2025/8/21 0:58:42

keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们

使用场景

使用原则：当我们在某些场景下不需要让页面重新加载时我们可以使用keepalive

例如:

当我们从首页–>列表页–>商详页–>再返回，这时候列表页应该是需要keep-alive

从首页–>列表页–>商详页–>返回到列表页(需要缓存)–>返回到首页(需要缓存)–>再次进入列表页(不需要缓存)，这时候可以按需来控制页面的keep-alive

使用方式1：结合include和exclude

keep-alive可以设置以下props属性：

include - 字符串或正则表达式。只有名称匹配的组件会被缓存
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存
max - 数字。最多可以缓存多少组件实例

注意: include/exclude 值是组件中的 name 命名，而不是路由中的组件 name 命名

// router.js
{path: '/home',name: 'home',component: () => import('../views/home.vue')
},
{ path: '/test',name: 'test',component: () => import('../views/test.vue')
},

// App.vue
<keep-alive include="test"><router-view/>
</keep-alive>----------------------------------------------------------------------------------------------------------------
补充： include/exclude 值的多种形式。// 1. 将缓存 name 为 test 的组件(基本）
<keep-alive include='test'><router-view/>
</keep-alive>// 2. 将缓存 name 为 a 或者 b 的组件，结合动态组件使用
<keep-alive include='a,b'><router-view/>
</keep-alive>// 3. 使用正则表达式，需使用 v-bind
<keep-alive :include='/a|b/'><router-view/>
</keep-alive>	// 4.动态判断
<keep-alive :include='includedComponents'><router-view/>
</keep-alive>// 5. 将不缓存 name 为 test 的组件
<keep-alive exclude='test'><router-view/>
</keep-alive>// 6. 和 `<transition>` 一起使用
<transition><keep-alive><router-view/></keep-alive>
</transition>// 7. 数组 (使用 `v-bind`)
<keep-alive :include="['a', 'b']"><component :is="view"></component>
</keep-alive>

使用方式2：通过路由中的 meta 属性控制是否需要缓存

将 test 路由中的 meta 添加 keepAlive 属性为 true，表示当前路由组件要进行缓存。

在路由中设置keepAlive属性判断是否需要缓存

// router.js
{path: '/home',name: 'home',component: () => import('../views/home.vue')
},
{ path: '/test',name: 'test',meta:{keepAlive:true},component: () => import('../views/test.vue')
},

<keep-alive><router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />

使用方式3：结合路由守卫来实现

实际开发中，我们可以结合路由守卫来实现需要缓存组件的缓存。

export default {beforeRouteLeave(to, from, next) {to.meta.keepAlive = true;next();}
}

生命周期函数

设置了 keep-alive 缓存的组件，会多出两个生命周期钩子（activated与deactivated）：

首次进入组件时：beforeRouteEnter > beforeCreate > created> mounted > activated > … … > beforeRouteLeave > deactivated
再次进入组件时：beforeRouteEnter >activated > … … > beforeRouteLeave > deactivated