首先，我们了解一下"生命周期"这个词。
	
通俗的来说，生命周期就是一个事务从出生到消失的过程。例如，一个人从出生到去世。

在vue中，vue的生命周期是指，从创建vue对象到销毁vue对象的过程。
1
2
3
4
5

1、图解Vue的生命周期

2、钩子函数

【解释】：

钩子函数是Vue框架中内置的一些函数，随着Vue的生命周期阶段，自动执行
1

【作用】：

特定的时间，执行特定的操作
1

【分类】：

四大阶段，八大方法
1

阶段

方法名

方法名

初始化

beforeCreate

created

挂载

beforeMount

mounted

更新

beforeUpdate

updated

销毁

beforeDestroy

destroyed

4、Vue生命周期之初始化阶段

【图示】：

• new Vue()： Vue实例化对象(组件也是一个的vue实例化对象)
• Init Events & Lifecycle：初始化事件和生命周期函数
• beforeCreate：生命周期函数被执行此时不能访问data和menthods等中的东西
• Init injections&reactivity：vue内部添加data和methods等
• created：生命周期钩子函数被执行，实例创建此时能访问data和menthods等中的东西
• 接下来开始编译模板：开始分析
• Has el option ：是否有el选项 – 检查要挂到哪里
• 没有. 调用$mount()方法
• 有, 继续检查template选项

【el选项挂载点图解】：

【代码演示】：

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

【控制台结果】：

5、Vue生命周期之挂载阶段

【图解挂载阶段】：

• template选项检查:
• 有：编译template返回render渲染函数
• 无：编译el选项对应标签作为template(要渲染的模板）vue工程项目不支持
• 虚拟DOM挂载成真实DOM之前:
• beforeMount ：生命周期钩子函数被执行
• Create： 把虚拟DOM和渲染的数据一并挂到真实DOM上
• 挂载完毕，mounted：生命周期钩子函数被执行

【代码演示】：

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

【控制台效果】：

6、Vue生命周期之更新阶段

【更新图解】：

• 当data里数据改变, 更新DOM之前，beforeUpdate – 生命周期钩子函数被执行此时获取不到更新的真实dom
• Virtual DOM：虚拟DOM重新渲染, 打补丁到真实DOM
• updated – 生命周期钩子函数被执行
• 当有data数据改变 – 重复这个循环

【代码演示】：

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

【效果展示】：

7、Vue生命周期之销毁阶段

【图解销毁】：

1. 当$destroy()被调用：比如组件DOM被移除(例v-if)
2. beforeDestroy：生命周期钩子函数被执行
3. 拆卸数据监视器、子组件和事件侦听器
4. 实例销毁后, 最后触发一个钩子函数
5. destroyed： 生命周期钩子函数被执行

【代码演示】

 -------App.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
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

【效果演示】：

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦