最近一次写Vue的时候，因为父子组件都有声明周期函数，在操作顺序上出现了一些之前没有想到的问题，特此记录一下

生命周期函数

• beforeCreate、created、beforeMount、mounted
• beforeUpdate、updated、beforeDestroy、destroyed
• activated、deactivated

场景

<script>
  let One = {
    // ....
    beforeCreate() {
      console.warn("子组件的beforeCreate");
    },
    created() {
      console.warn("子组件的created");
    },
    beforeMount() {
      console.warn("子组件beforemount");
    },
    mounted() {
      console.warn("子组件mounted");
    },
    // ....
  };
  new Vue({
    // ...
    components: {
      One,
    },
    beforeCreate() {
      console.log("父组件的beforeCreate");
    },
    created() {
      console.log("父组件的created");
    },
    beforeMount() {
      console.log("父组件beforemount");
    },
    mounted() {
      console.log("父组件mounted");
    },
    // ...
  });
</script>

• 上面的运行结果为:
• 

分析

• 因为Vue是从根组件（Vue实例）开始执行的，然后依次去读取目标dom下的模板字符串开始进行解析和生成vdom，然后在这个过程中开始执行一些生命钩子函数，依次从beforeCreate->created->beforeMount，这里就开始准备生成vdom了
• 子组件是含括在父组件内部的，开始生成vdom时，每个组件都是一个实例，都会经历一圈生命周期函数，然后完成该组件的vdom后，才算整个vue的vdom完毕，所以父组件的mounted阶段才会在最后才执行