你可能不知道的vue父子组件生命周期

关于vue组件的生命周期，相比各位同学都已经滚瓜烂熟。

但是父子组件的生命周期呢？

例如

   <template>  
     <div class="home">    
        <HelloWorld/>    
          我是父亲  
     </div>
   </template>
  export default {
    name: 'Home',
    components: {
      HelloWorld
    },
    data () {
      return {}
    },
    methods: {},
    beforeCreate () {
      console.log('father is beforeCreate')
    },
    created () {
      console.log('father is Create')
    },
    beforeMount () {
      console.log('father is beforeMount')
    },
    mounted () {
      console.log('father is mounted')
    }

//子组件
<template>
  <div class="hello">
    我是子组件
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    beforeCreate () {
      console.log('son is beforeCreate')
    },
    created () {
      console.log('son is Create')
    },
    beforeMount () {
      console.log('son is beforeMount')
    },
    mounted () {
      console.log('son is mounted')
    }
  }
</script>

嘿嘿,如果没有仔细了解过，还真不知道吧

答案

通过这个结论和现有的知识，我们可以分析出
一：首先我们知道，vue的生命周期是由vue创建实例vm,并将其挂载到id为app的元素上开始的，所以一切的开始肯定从根元素开始的，即从父组件出发
二：首先是父组件的beforeCreate，此处主要为初始化操作
三：父组件完成Create，主要是数据代理和数据绑定，但还没有挂载
四：父组件beforeMount，进行模版解析，但还没有挂载到页面，到最后mounted挂载的时候再更新视图,因为此处还有子组件,所以先操作子组件的数据挂载
五：自组件重复父组件的生命的周期，不同的是，当执行到beforeCreate的时候，因为没有再下级的组件了，所以子组件直接mounted渲染
六：当子组件渲染完成之后，再继续渲染他的父组件，最后直到渲染完成

我们知道的，当数据变化后、虚拟DOM渲染重新渲染页面前会触发beforeUpdate()函数，此时视图还未改变。当虚拟DOM渲染页面视图更新后会触发updated()函数
由此我们很容易得出结论

类似的

有什么说的不对的欢迎大佬们留言指出哦🙏