Vue父子组件生命周期函数调用顺序

查阅了很多资料，猛然一想都不如自己写个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

五、参考信息

官方文档-生命周期图

生命周期钩子函数	详细	应用场景	备注
beforeCreate	实例初始化之后，数据观测 (data observer) 和 event/watcher事件配置之前被调用。vue实例中的el，data都为undefined	可以在这加个loading
created	在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用。data和methods都已经有数据了。	在这结束loading，还可以调用接口获取初始数据
beforeMount	在挂载开始之前被调用：相关的 render 函数首次被调用。完成 el 初始化。		该钩子在服务器端渲染期间不被调用。
mounted	实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。注意 mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick	获取 el 中 DOM 元素，进行 DOM 操作；如果返回的数据操作依赖 DOM 完成，推荐这个时候发送数据请求	该钩子在服务器端渲染期间不被调用。

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

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