项目中写vue也没注意到<keep-alive></keep-alive>
这个组件,最近在深入的研究vue组件的生命周期函数,每一个函数都是干嘛的,然后其中有activated
和deactivated
这两个函数与<keep-alive></keep-alive>
这个组件有关
activated
: keep-alive组件激活时调用deactivated
: keep-alive组件停用时调用keep-alive用法
<keep-alive>
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们<keep-alive>
是一个抽象组件:它自身不会渲染一个DOM元素,也不会出现在父组件链中- 当组件在
<keep-alive>
内被切换,它的activated
和deactivated
这两个生命周期钩子函数将会被对应执行具体的实例如下
- 是一个简单的tab切换,可以尝试把
<keep-alive>
去掉之后,对比一下,然后就会发现它的好处
test.vue
1 | <template> |
测试结果如下:
注意看一下页面和控制台输出的信息,可以更加直观的注意到<keep-alive>
的作用及activated
和deactivated
这两个函数什么时候会被触发
- 打开页面,会出现下面这样
用setTimeout模拟请求后端接口的场景
- 点击
title2
,出现下面的情况 - 再次点击
title1
,出现下面的情况,你会发现从后端请求的数据会快速显示出来,但是如果你此时不用,会重新请求数据,你可以尝试一下
test1.vue
和test2.vue
的相关代码如下:
test1.vue
1 | <template> |
test2.vue
1 | <template> |