vue3使用<keep-alive>
时间: 2024-09-17 13:08:44 浏览: 26
在 Vue 3 中,`<keep-alive>` 是一种特殊的组件,用于缓存动态路由组件,以便当用户从一个视图切换到另一个视图后再返回时,可以快速恢复先前的状态,而不是每次都重新渲染整个组件。它通常配合 `v-if` 或 `v-show` 使用,可以节省不必要的计算资源。
当你想让某个组件仅在第一次加载时渲染,然后在后续的切换中保持不变时,就可以将这个组件放入 `<keep-alive>` 标签内。例如:
```html
<template>
<div>
<router-view v-slot="{ component }">
<keep-alive>
<component :is="component" />
</keep-alive>
</router-view>
</div>
</template>
<script>
export default {
components: {
// 将需要缓存的组件注册在这里
},
activated() {
this.$route.meta.keepAlive = true; // 设置当前路由需要缓存
},
deactivated() {
this.$route.meta.keepAlive = false; // 取消缓存,适用于离开页面的情况
}
}
</script>
```
在这个例子中,`activated()` 和 `deactivated()` 生命周期钩子会在组件被激活和失去焦点时分别设置或清除路由的 `meta.keepAlive` 属性,以此控制 `<keep-alive>` 的显示状态。