生命周期
# 生命周期
activated ：keep-alive 组件激活时调用。
使用vue-router时有时需要使用来缓存组件状态
这个时候created钩子就不会被重复调用了，如果我们的子组件需要在每次加载的时候进行某些操作，可以使用activated钩子触发。
deactivated ：keep-alive 组件停用时调用。
// 调用 beforeCreate 之前，数据初始化并未完成
beforeCreate: function () {
// el 和 data 均没有初始化。
// data、props、methods 这些属性无法访问到，
},
// 在这之间就是调用 initState() 进行初始化 props / data / method / watch / methods
// 初始化顺序：props、methods、data
created: function () {
// 初始化完成 可以访问 props / data / method / watch / methods
// 但这时候并未完成 dom 的挂载，因此无法访问 dom
// 如果需要某些数据获取完成才允许进入页面的场景，建议在路由钩子beforeRouteEnter中实现
},
beforeMount: function () {
// 这个时候虽然页面没有显示，但已经用虚拟 Dom 占了坑，但是还未挂载到 dom
},
mounted: function () {
// 直到调用 vm.$mount() 才是dom的挂载（mounted 不会承诺所有的子组件也都一起被挂载 nextTick）
// vue 不允许直接挂载到 body 或页面文档上
// 最终会将 template 解析成 render 函数 生成虚拟 dom（render 作用主要是生成 虚拟 dom）
// 将 vnode 转换为真实 DOM，并且更新到页面中
// 这个时候页面已经显示。（结束）
},
beforeUpdate: function () {
// 更新前，获取的是更新前的各种状态
// 此时新的虚拟DOM已经生成，避免在这个钩子函数中操作数据
// 监听组件数据，一旦发生变化，触发 beforeUpdate 生命钩子
},
updated: function () {
// 更新后，获取到的状态已是最新
// 可以执行依赖于 DOM 的操作，避免在这个钩子函数中操作数据
},
beforeDestroy: function () {
// 常用于：销毁定时器、解绑全局事件、销毁插件对象
},
destroyed: function () {
// 实例的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
}
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
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
# 父子组件生命周期顺序
父组件beforeCreated
父组件created
父组件beforeMounted
子组件beforeCreated
子组件created
子组件beforeMounted
子组件mounted
父组件mounted
# 若异步引入呢
父组件的 beforeCreate、created、beforeMount、mounted
然后子组件的 beforeCreate、created、beforeMount、mounted
# 若有孙组件呢
父组件先 beforeCreate => created => beforeMount
然后子组件开始 beforeCreate => created => beforeMount
然后孙组件 beforeCreate => created => beforeMount => mounted
孙组件mounted，子组件mounted，父组件再mounted
# 父子组件顺序总结：
父组件先创建，然后子组件创建；子组件先挂载，然后父组件挂载
上次更新: 2022/05/05, 17:47:41