在Vue中，每个组件都有其对应的生命周期，这个过程与Vue 生命周期中描述的过程一致。
Vue组件的生命周期图示如下：
下图是尚硅谷天禹所给的有关Vue生命周期的解释：
嵌套组件的生命周期
定义存在嵌套关系的组件：
App.vue（父组件，3秒后自动销毁）：
1<template>
2 <div>
3 <h1>App.vue</h1>
4 <UserInfo/>
5 </div>
6</template>
7
8<script>
9import SubComponent from './components/SubComponent.vue';
10
11export default {
12 name: 'app',
13 components: {SubComponent},
14 beforeCreate() {
15 console.log('App beforeCreate...');
16 },
17 created() {
18 console.log('App created...');
19 },
20 beforeMount() {
21 console.log('App beforeMount...');
22 },
23 mounted() {
24 console.log('App mounted...');
25 // 3秒后自动销毁
26 setTimeout(() => {
27 this.$destroy()
28 }, 3000);
29 },
30 beforeDestroy() {
31 console.log('App beforeDestroy...');
32 },
33 destroyed() {
34 console.log('App destroyed...');
35 },
36}
37</script>
SubComponent.vue（子组件，不自动销毁）：
1<template>
2 <h2>SubComponent.vue</h2>
3</template>
4
5<script>
6export default {
7 name: 'SubComponent',
8 beforeCreate() {
9 console.log('SubComponent beforeCreate...');
10 },
11 created() {
12 console.log('SubComponent created...');
13 },
14 beforeMount() {
15 console.log('SubComponent beforeMount...');
16 },
17 mounted() {
18 console.log('SubComponent mounted...');
19 },
20 beforeDestroy() {
21 console.log('SubComponent beforeDestroy...');
22 },
23 destroyed() {
24 console.log('SubComponent destroyed...');
25 },
26}
27</script>
启动项目后，浏览器控制台输出内容如下：
1App beforeCreate...
2App created...
3App beforeMount...
4SubComponent beforeCreate...
5SubComponent created...
6SubComponent beforeMount...
7SubComponent mounted...
8App mounted...
9App beforeDestroy...
10SubComponent beforeDestroy...
11SubComponent destroyed...
12App destroyed...
从控制台的输出中可以看出，子组件的初始化及挂载流程（从beforeCreate到mounted）是在父组件挂载流程（从beforeMount到mounted）中完成的；子组件的销毁流程（从beforeDestroy到destroyed）是在父组件的卸载流程（从beforeDestroy到destroyed）中完成的。
嵌套的组件的生命周期可以用下图来表示：
评论