1. 1. 父子孙组件创建顺序
  2. 2. 父子孙销毁顺序
  3. 3. 存在keep-alive缓存时
    1. 3.1. 创建
    2. 3.2. 销毁
  4. 4. 存在路由守卫时
    1. 4.1. 创建
    2. 4.2. 销毁
Vue生命周期探究

项目地址:https://github.com/Yx1aoq1/vue-life-cycle

父子孙组件创建顺序

1
2
3
4
5
6
7
8
9
10
11
12
Parent beforeCreate
Parent created
Parent beforeMount
Children beforeCreate
Children created
Children beforeMount
Grandson beforeCreate
Grandson created
Grandson beforeMount
Grandson mounted
Children mounted
Parent mounted

父子孙销毁顺序

1
2
3
4
5
6
Parent beforeDestroy
Children beforeDestroy
Grandson beforeDestroy
Grandson destroyed
Children destroyed
Parent destroyed

存在keep-alive缓存时

创建

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Parent beforeCreate
Parent created
Parent beforeMount
Children beforeCreate
Children created
Children beforeMount
Grandson beforeCreate
Grandson created
Grandson beforeMount
Grandson mounted
Children mounted
Parent mounted
--- 创建 ---
Grandson activated
Children activated
Parent activated

销毁

1
2
3
Grandson deactivated
Children deactivated
Parent deactivated

存在路由守卫时

创建

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Parent beforeRouteEnter
--- 进入路由 ---
Parent beforeCreate
Parent created
Parent beforeMount
Children beforeCreate
Children created
Children beforeMount
Grandson beforeCreate
Grandson created
Grandson beforeMount
Grandson mounted
Children mounted
Parent mounted
--- 创建 ---

销毁

1
2
3
4
5
6
7
8
9
Parent beforeRouteLeave
--- 离开路由 ---
Parent beforeDestroy
Children beforeDestroy
Grandson beforeDestroy
Grandson destroyed
Children destroyed
Parent destroyed
--- 销毁 ---