14 【TS类型声明 keepAlive】

14 【TS类型声明 keepAlive】
25.Ts 类型声明使用 & 讲解

该文章未归纳完，那么多API肯定也说不完。。不过也涵盖了主要的组合式 API 的 TS类型。

核心：大部分都是运用API函数泛型来定义类型。

25.1 父组件相关的
```
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
```
25.2 子组件相关的
```
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
```
26.keep-alive

26.1 基本介绍

有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到keep-alive组件。

开启keep-alive 生命周期的变化
- 初次进入时： onMounted> onActivated
- 退出后触发 deactivated
- 再次进入：
- 只会触发 onActivated
- 事件挂载的方法等，只执行一次的放在 onMounted中；组件每次进去执行的方法放在 onActivated中
```
 
1
```
Props：
- include - string | RegExp | Array。只有名称匹配的组件会被缓存。
- exclude - string | RegExp | Array。任何名称匹配的组件都不会被缓存。
- max - number | string。最多可以缓存多少组件实例。
用法：

包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和相似，是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。

主要用于保留组件状态或避免重新渲染。
注意事项：
1. 优先级: 如果 exclude 和 include 内都有同个组件名， exclude 优先级高于 include
2. 缓存销毁: max 当已缓存的组件数量超过 max 值，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。
3. 生命周期: 被缓存的组件才会调用 activated 这些缓存相关的生命周期 ,换句话说就是 exclude 内的组件不会触发 activated！！
4. 离开组件、再度激活: 当组件在内被切换时，它的 mounted 和 unmounted 生命周期钩子不会被调用，取而代之的是 activated 和 deactivated。(这会运用在的直接子节点及其所有子孙节点。)
26.2 使用案例
```
<template>
  <keep-alive :exclude="['test1']" :include="['test1','test2']" max='1'>
    <component :is='dynamic'>component>
  keep-alive>
  <el-button @click='changeComponent'>更改组件el-button>
template>
<script setup lang="ts">
import test1 from './test-components/test1.vue'
import test2 from './test-components/test2.vue'
import { ref,shallowRef } from 'vue'
let dynamic:any = shallowRef(test1)
let state = ref(true)
function changeComponent() {
  if (state.value) {
    dynamic.value = test2
  }else{
    dynamic.value = test1
  }
  state.value = !state.value
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
```
- include 和 exclude
  
  include 和 exclude prop 允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示：
```
  

 


  

 


  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
```
使用了 include / exclude 后，必须显式声明组件的 name !!!
这样才能与缓存组件匹配、生效。

提示

在 3.2.34 或以上的版本中, 使用

25.Ts 类型声明使用 & 讲解

25.1 父组件相关的

25.2 子组件相关的

26.keep-alive

26.1 基本介绍

26.2 使用案例