vue父子组件生命周期的执行顺序

本文简述父子组价生命周期的执行顺序，父子组件在项目经常用到，执行顺序是必要知道的，那么接下来我们来看下

父组件

<template>
<child></child>
</template>
<<script>
import child from './child'
export default {
  data () {
    return {}
  },
  components: {child},
  beforeCreate() {
    console.log('父组件的beforeCreate')
  },
  created() {
    console.log('父组件的created')
  },
  beforeMount() {
    console.log('父组件的beforeMount')
  },
  mounted() {
     console.log('父组件的mounted')
  },
}
</script>

子组件

<template>
<div>
 '123'
</div>
</template>
<<script>
export default {
  data () {
    return {}
  },
  beforeCreate() {
    console.log('子组件的beforeCreate')
  },
  created() {
    console.log('子组件的created')
  },
  beforeMount() {
    console.log('子组件的beforeMount')
  },
  mounted() {
     console.log('子组件的mounted')
  },
}
</script>

浏览器控制面板输出的值是

我们看到是先执行父组件的beforeCreate, created, beforeMounted这三个虚拟Dom生成还没有挂载到页面上，因为一旦挂载到页面上渲染完成，

beforeMounted之后执行子组件的四个生命周期，子组件先挂载完成，接着父组件挂载

因此在子组件的mounted中渲染父组件在mounted阶段请求的数据，是会无反应的。因为子组件mounted渲染数据会发生在父组件mounted请求数据之前