查阅了很多资料，猛然一想都不如自己写个demo结果来的快！

一、代码

父组件： App.vue

<template>
  <div id="app">
    <img ref="img1" src="./assets/logo.png">
    <Children/>
  </div>
</template>

<script>
import Children from './components/Children';

export default {
  name: 'App',
  components: {
    Children,
  },
  data() {
    return { test: 1 };
  },
  methods: {
    getTest() {
      return 'getTest';
    },
  },
  beforeCreate() {
    alert('我是父组件的beforeCreate');
    window.console.log('父组件的beforeCreate:', this.$refs.img1, this.test, this.getTest());
  },
  created() {
    alert('我是父组件的created');
    window.console.log('父组件的created:', this.$refs.img1, this.test, this.getTest());
  },
  beforeMount() {
    alert('我是父组件的beforeMount');
    window.console.log('父组件的beforeMount', this.$refs.img1);
  },
  mounted() {
    alert('我是父组件的mounted');
    window.console.log('父组件的mounted', this.$refs.img1e);
  },
};
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

子组件：Children.vue

<template>
    <div class="children">
      <h1>大渣好，我是子组件</h1>
    </div>
</template>

<script>
export default {
  name: 'children',
  beforeCreate() {
    alert('我是子组件的beforeCreated');
  },
  created() {
    alert('我是子组件的created');
  },
  beforeMount() {
    alert('我是子组件的beforeMount');
  },
  mounted() {
    alert('我是子组件的mounted');
  },
};
</script>

<style scoped>
  .children {
  }
</style>

二、结果

最终页面展示

三、拆分步骤

1. 首先调用父组件befreCreate

1.首先调用父组件befreCreate

beforeCreate时el,data,methods都为undefined

2. 调用父组件的created

2.调用父组件的created

created时，已经能获取data、methods里的数据

3. 调用父组件的beforeMount

3.调用父组件的beforeMount

这时的el还是undefined

4. 调用子组件的beforeCreate

4.调用子组件的beforeCreate

5. 调用子组件的created

5.调用子组件的created

6. 调用子组件的beforeMount

6.调用子组件的beforeMount

7. 调用子组件的mounted

7.调用子组件的mounted

8. 调用父组件的mounted

8.调用父组件的mounted

终于获取到el了，使用ref定义和$refs获取

页面终于渲染出来了

四、总结

Vue父子组件生命周期函数调用顺序为：
父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted

五、参考信息

官方文档-生命周期图

如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick ：

mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}