uni-app生命周期

uni-app的生命周期包括：应用生命周期、页面生命周期、组件生命周期

一、应用生命周期（只能在App.vue文件中监听）

在App.vue文件中打印

1
2
3
4
5
6
7
8
9
10
11
12
13

在控制台输出可以看到执行顺序

二、页面声明周期

更多页面生命周期细节，详见官方文档

在page页面中打印

在控制台输出可以看到执行顺序

三、组件生命周期（同Vue组件生命周期）

H5和微信小程序的生命周期函数调用顺序不一致

H5

page beforeCreate
page onLoad
page onShow
page created
page beforeMount

component beforeCreate
component created
component beforeMount
component mounted

page onReady
page mounted

1
2
3
4
5
6
7
8
9
10
11
12
13
14

微信小程序

page beforeCreate
page created
page beforeMount

component beforeCreate
component created
component beforeMount

page onLoad
page onShow

component mounted

page mounted
page onReady

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

一般情况下，主要使用的周期函数如下，他们的执行顺序是固定的

page onLoad

component mounted

page mounted

1
2
3
4
5
6

测试代码

页面

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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165

组件 components/TestComponent.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
57
58
59
60
61
62
63
64
65