项目中写vue也没注意到<keep-alive></keep-alive>这个组件,最近在深入的研究vue组件的生命周期函数,每一个函数都是干嘛的,然后其中有activated和deactivated这两个函数与<keep-alive></keep-alive>这个组件有关
activated: keep-alive组件激活时调用deactivated: keep-alive组件停用时调用 <keep-alive>包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们<keep-alive>是一个抽象组件:它自身不会渲染一个DOM元素,也不会出现在父组件链中- 当组件在
<keep-alive>内被切换,它的activated和deactivated这两个生命周期钩子函数将会被对应执行 具体的实例如下
- 是一个简单的tab切换,可以尝试把
<keep-alive>去掉之后,对比一下,然后就会发现它的好处
test.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
<template>
<div
class=
"test">
<div
class=
"testNav">
<div :
class=
"{'selected':tab === 1,'testTitle':true}" @click=
"toTab(1)">标题一<
/div>
<div :class="{'selected':tab === 2,'testTitle':true}" @click="toTab(2)">标题二</div>
<
/div>
<div class="container">
<keep-alive>
<Test1 v-if="tab === 1">
</Test1>
<Test2 v-
else>
<
/Test2>
</keep-alive>
<
/div>
</div>
<
/template>
<script>
import Test1 from './test1.vue
';
import Test2 from './test2.vue
';
export default {
data() {
return {
tab: 1,
};
},
components: {
Test1,
Test2,
},
methods: {
toTab(index) {
this.tab = index;
},
},
}
</script>
<style lang="less">
.test {
width: 100%;
.testNav {
height: 60px;
line-height: 60px;
display: flex;
border-bottom: 1px solid #e5e5e5;
.testTitle {
flex: 1;
text-align: center;
}
.selected {
color: red;
}
}
}
</style>
|
测试结果如下:
注意看一下页面和控制台输出的信息,可以更加直观的注意到<keep-alive>的作用及activated和deactivated这两个函数什么时候会被触发
- 打开页面,会出现下面这样
用setTimeout模拟请求后端接口的场景
- 点击
title2,出现下面的情况
- 再次点击
title1,出现下面的情况,你会发现从后端请求的数据会快速显示出来,但是如果你此时不用
test1.vue和test2.vue的相关代码如下:
test1.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<template>
<div
class=
"test1">
test1
{{testInfo1}}
<
/div>
</template>
<script>
export
default {
data() {
return {
testInfo1:
'',
};
},
activated() {
console.log(
'测试1被激活');
},
deactivated() {
console.log(
'测试1被缓存');
},
created() {
setTimeout(
() => {
this.testInfo1 =
'这是测试一的数据';
},
2000);
},
}
<
/script>
|
test2.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<template>
<div>
test2
{{testInfo2}}
<
/div>
</template>
<script>
export
default {
data() {
return {
testInfo2:
'',
}
},
activated() {
console.log(
'测试2被激活');
},
deactivated() {
console.log(
'测试2被缓存');
},
created() {
setTimeout(
() => {
this.testInfo2 =
'这是测试二的数据';
},
2000);
},
}
<
/script>
|
转载http://wangyaxing.top/categories/vue/
已为社区贡献259条内容
所有评论(0)