vue之keep-alive缓存组件

最新推荐文章于 2024-04-19 16:19:55 发布

Ginger_undefined

最新推荐文章于 2024-04-19 16:19:55 发布

阅读量101

点赞数

本文链接：https://blog.csdn.net/yy168888/article/details/109051358

版权

本文详细介绍了Vue.js中<keep-alive>组件的使用，探讨了它如何影响组件的生命周期钩子。通过实例展示了在App.vue中使用<keep-alive>进行路由缓存，并解释了如何利用key属性来控制组件的重新创建。同时，提到了keep-alive在优化性能和提升用户体验方面的作用。文章还涵盖了不同路由跳转情况下组件生命周期的变化，并提供了具体的代码示例。

摘要由CSDN通过智能技术生成

之前只知道<keep-alive>是做缓存用得，看到很多项目都会在 app.vue这个根组件里用到。但是去掉之后，发现也没什么特别的影响，所以一直不太明白它怎么用。直到，我突然想到一个这样的问题，路由跳转会触发生命周期的钩子函数吗？
答案是需分情况讨论，

如果是跳转到当前页面的子路由，且页面中有<router-view/>则不会触发生命周期的钩子函数
如果不是上述的路由关系，但是设置了<keep-alive></keep-alive>, 这个时候也不会触发生命周期的钩子函数
此外，其他情况，会触发destoryed，即离开会销毁当前组件

由此可见，keep-alive可以实现组件缓存，提高性能，提升用户体验。

所以，一般在App.vue这个根组件中会比较常见：

<keep-alive>
	<router-view></router-view>
</keep-alive>

如果某些特定的模块，每次进入时，需要强制重新更新组件，而不是缓存组件。这时候可以利用key属性。当key变化时，vue就会删除旧组件并创建一个新组件。因此, app.vue根组件的内容修改成如下：

<keep-alive>
	<router-view key="key"></router-view>
</keep-alive>
...
export default{
	computed:{
		key(){
			return this.$route.fullPath
		}
	}
}

在每次进入都需要重现创建组件的地方：

<template>
	<div @click="onClick">....</div>
</template>
...
export defaut{
	methods:{
		onClick(){
			this.$router.push({
				path: '/product',
				query:{
					t: + new Date()
				}
			})
			}
	}
}

keep-alive的生命周期

初次进入时，created > mounted > activated, 退出后触发deactivated。如果设置了key且key改变，则会销毁组件，触发destoryed。否则不会触发destoryed.
缓存情况下，再次进入，不会触发created、mounted这一系列。仅仅只触发activated。因此，只执行一次的事件放在mounted中，组件每次进入都要执行的方法放在activated中。