父子组件的生命周期顺序

单独组件的生命相信大家都明白，但是当出现父子组件这种模式时，他们的生命周期又会出现什么问题呢？

父组件

<template>
  <div>
    <h3>我是父元素</h3>
    <Son></Son>
  </div>
</template>

<script>
import Son from '@/components/Son.vue'
export default {
  name: 'App',
  components: {
    Son
  },
  beforeCreate() {
    console.log('父元素---beforeCreate');
  },
  created() {
    console.log('父元素---created');
  },
  beforeMount() {
    console.log('父元素---beforeMount');
  },
  mounted() {
    console.log('父元素---mounted');
  }
}
</script>

子组件

<template>
  <div>
    <h3>我是子元素</h3>
  </div>
</template>

<script>
export default {
  name: 'Son',
  beforeCreate() {
    console.log('子元素---beforeCreate');
  },
  created() {
    console.log('子元素---created');
  },
  beforeMount() {
    console.log('子元素---beforeMount');
  },
  mounted() {
    console.log('子元素---mounted');
  }
}
</script>

打印结果：