keep-alive属性及生命周期

最新推荐文章于 2025-01-22 17:11:20 发布

np918

最新推荐文章于 2025-01-22 17:11:20 发布

阅读量1.8w

点赞数 1

分类专栏： Vue类文章标签： keep-alive

本文链接：https://blog.youkuaiyun.com/np918/article/details/97767018

版权

Vue类专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了Vue中keep-alive组件的功能和使用方法，包括如何通过路由元信息实现特定组件的缓存控制，以及activated和deactivated钩子函数的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.activated：页面第一次进入的时候，钩子触发的顺序是created->mounted->activated
2.deactivated ：页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated

keep-alive简介：
keep-alive是vue内置的一个组件，可以被包含的组件保留状态，或避免重新渲染。

	<keep-alive>
	  <component>
	    <!-- 该组件将被缓存！ -->
	  </component>
	</keep-alive>

如果只想router-view里面某个组件被缓存的话，可以给他增加router.meta属性

// routes 配置
	export default [
	  {
	    path: '/',
	    name: 'home',
	    component: Home,
	    meta: {
	      keepAlive: true // 需要被缓存
	    }
	  }, {
	    path: '/:id',
	    name: 'edit',
	    component: Edit,
	    meta: {
	      keepAlive: false // 不需要被缓存
	    }
	  }
	]

	<keep-alive>
	    <router-view v-if="$route.meta.keepAlive">
	        <!-- 这里是会被缓存的视图组件，比如 Home！ -->
	    </router-view>
	</keep-alive>
	
	<router-view v-if="!$route.meta.keepAlive">
	    <!-- 这里是不被缓存的视图组件，比如 Edit！ -->
	</router-view>