vue 父子组件生命周期的调用顺序想起了一道曾经面试的时候，被面试官问到的问题：关于父子组件生命周期调用顺序是咋样的？当

想起了一道曾经面试的时候，被面试官问到的问题：关于父子组件生命周期调用顺序是咋样的？当初懵懂，现在赶紧整理一下，以防在同一个坑上跌倒2次。

枚举几种情况下父子组件生命周期的调用顺序：

开始渲染阶段
父组件属性改变不会引起子组件变化的场景
子组件属性发生变化且不会影响父组件的场景
父组件属性改变引起子组件变化的场景
父组件销毁时
v-if控制子组件的显隐的场景
v-show控制子组件的显隐的场景

现有父组件Parent，子组件Child:

界面如下：

代码：

Parent组件：


<template>
  <div class="main-layout">
    <div>
      parent name:
      <el-input v-model="name" style="width: 200px" />
    </div>
    <br />
    <el-button @click="addCount">增加数量</el-button>
    <br /><br />
    <el-button @click="childToggole">Child组件显隐(v-if)</el-button>
    <el-button @click="childToggole2">Child组件显隐(v-show)</el-button>
    <br /><br />

    <child :count="count" v-if="childShow" v-show="childShow2" />
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Child from "./Child.vue";

@Component({
  name: "Parent",
  components: {
    Child
  }
})
export default class HelloWorld extends Vue {
  name = "头部";

  childShow = true;

  childShow2 = true;

  count = 0;

  private childToggole() {
    this.childShow = !this.childShow;
  }

  private childToggole2() {
    this.childShow2 = !this.childShow2;
  }

  private addCount() {
    this.count = this.count + 1;
  }

  beforeCreate() {
    console.log("Parent --> beforeCreate");
  }

  created() {
    console.log("Parent --> created");
  }

  beforeMount() {
    console.log("Parent --> beforeMount");
  }

  mounted() {
    console.log("Parent --> mounted");
  }

  beforeUpdate() {
    console.log("Parent --> beforeUpdate");
  }

  updated() {
    console.log("Parent --> updated");
  }

  beforeDestroy() {
    console.log("Parent --> beforeDestroy");
  }

  destroyed() {
    console.log("Parent --> destroyed");
  }
}
</script>

<style lang="less">
.main-layout {
  margin-top: 20px;
  background-color: #ddd;
  padding: 20px;
}
</style>

Child组件：

<template>
  <div class="child-layout">
    <div>child name: <el-input v-model="name" style="width: 100px" /></div>
    <br />
    <div>数量：{{ count }}</div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";

@Component({ name: "Child" })
export default class HelloWorld extends Vue {
  @Prop({ default: 0 }) count?: number;

  name = "";

  beforeCreate() {
    console.log("Child --> beforeCreate");
  }

  created() {
    console.log("Child --> created");
  }

  beforeMount() {
    console.log("Child --> beforeMount");
  }

  mounted() {
    console.log("Child --> mounted");
  }

  beforeUpdate() {
    console.log("Child --> beforeUpdate");
  }

  updated() {
    console.log("Child --> updated");
  }

  beforeDestroy() {
    console.log("Child --> beforeDestroy");
  }

  destroyed() {
    console.log("Child --> destroyed");
  }
}
</script>

<style lang="less">
.child-layout {
  margin-top: 20px;
  background: #0af;
  width: 100%;
  height: 300px;
  padding: 20px;
  box-sizing: border-box;
}
</style>

放置Parent组件的容器组件的代码：

<template>
  <div>
    <el-button @click="parentToggole">Parent组件显隐</el-button>
    <parent v-if="show" />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Parent from "./Parent.vue";

@Component({
  name: "Main",
  components: {
    Parent
  }
})
export default class App extends Vue {
  show = true;

  private parentToggole() {
    this.show = !this.show;
  }
}
</script>