之前只知道<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中。