vue父子组件生命周期渲染顺序

APP为父组件，banner为子组件
APP beforeCreate
APP created
APP beforeMount
banner beforeCreate
banner created
banner beforeMount
banner mounted
APP mounted

验证代码

//App.vue
<template>
  <Banner />
</template>

<script>
import Banner from "./components/Banner";
export default {
  name: "App",
  components: { Banner },
  beforeCreate() {
    console.log("APP beforeCreate");
  },
  created() {
    console.log("APP created");
  },
  beforeMount() {
    console.log("APP beforeMount");
  },
  mounted() {
    console.log("APP mounted");
  },
};
</script>

//Banner.vue
<template>
  <h2>banner</h2>
</template>

<script>
export default {
  name: "Banner",
  beforeCreate() {
    console.log("banner beforeCreate");
  },
  created() {
    console.log("banner created");
  },
  beforeMount() {
    console.log("banner beforeMount");
  },
  mounted() {
    console.log("banner mounted");
  },
};
</script>