vue 保持组件状态不起作用失效 keep-alive

原创已于 2025-08-14 17:43:01 修改 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#spring #java #idea

于 2021-03-30 21:29:42 首次发布

vue 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了Vue中如何使用keep-alive进行组件缓存，通过在<keep-alive>标签内包裹组件来实现。同时讨论了缓存失效的情况，当组件在不同的路由视图之间切换时，由于视口变化导致缓存失效的问题。并提供了示例代码展示如何配置include属性来指定缓存组件。最后，通过vuetools检查是否正确缓存组件。

前言

Vue组件实现缓存很简单，用keep-alive包起来要缓存的元素即可。

keep-alive用法

<keep-alive></keep-alive>，用来开关直接子元素，如果有多个条件性的子元素，要求同时只有一个子元素被渲染。keep-alive跟transition一样，不会生成DOM；其include属性，用来指定要缓存组件的name，可以是字符串、数组、正则表达式，字符串可以用逗号隔开表示多个组件name；include会先匹配组件的name，如果name没有指定，那么匹配父组件中注册的名字(components中的名字)。实践中有个场景，左侧是导航栏，右侧是多个标签页，标签页都会渲染在同一个router-view中

Main.vue

//左侧导航栏
<LeftNavMenu></LeftNavMenu>
<keep-alive :include="includeArr">
	<router-view></router-view>
</keep-alive>

export default {
	data(){
		return {
		    //这个名字要与componentName1.vue中的name一致。
			includeArr:["componentName1"]
		}
	}
}

componentName1.vue

export default{
	name:"componentName1"
}

缓存组件失效情况

缓存组件失效的原因是缓存的视口不一样，如下

//App.vue
<template>
  <div id="app">
  //假如componentName1.vue、componentName2.vue会渲染在这个视口；那么这两个组件之间切换，
  会缓存，因为是同一个视口；
    <router-view ></router-view>
  </div>
</template>

//Main.vue
<template>
  <div id="main">
  //OtherComponent渲染在这个视口，
  那么从OtherComponent跳转到componentName1或者componentName2，OtherComponent都不会被缓存，
  因为视口不一样。
    <router-view ></router-view>
  </div>
</template>

能不能缓存，可以通过vue tools查看，
在这里插入图片描述