关于父子组件生命周期的调用顺序

众所周知vue的生命周期，但是父子组件生命周期的顺序是啥样的呢，简单粗暴了撸了个例子

父组件

<template>
  <div class="hello">
    <v-child :name=name></v-child>
    <span>msgdddddd</span>
    {{msg}}
  </div>
</template>

<script>
import VChild from './childComponent'

export default {
  components: {
    VChild
  },
  data () {
    return {
      name: 'randdadf',
      msg: 'Welcdddd'
    }
  },
  beforeCreate () {
    console.log('我是父组件beforeCreate')
  },
  created () {
    console.log('我是父组件created')
  },
  beforeMount () {
    console.log('我是父组件beforeMount')
  },
  mounted () {
    console.log('我是父组件mounted')
  },
  beforeUpdate () {
    console.log('我是父组件beforeUpdate')
  },
  updated () {
    console.log('我是父组件updated')
  },
  beforeDestroy () {
    console.log('我是父组件beforeDestroy')
  },
  destroyed () {
    console.log('我是父组件destroyed')
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

子组件

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    {{name}}
    <h2>Essential dLinksd</h2>
  </div>
</template>

<script>
export default {
  props: ['name'],
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  beforeCreate () {
    console.log('我是子组件beforeCreate')
  },
  created () {
    console.log('我是子组件created')
  },
  beforeMount () {
    console.log('我是子组件beforeMount')
  },
  mounted () {
    console.log('我是子组件mounted')
  },
  beforeUpdate () {
    console.log('我是子组件beforeUpdate')
  },
  updated () {
    console.log('我是子组件updated')
  },
  beforeDestroy () {
    console.log('我是子组件beforeDestroy')
  },
  destroyed () {
    console.log('我是子组件destroyed')
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

结果：

当子组件数据更新

当修改父组件data时候

只修改父组件节点文本时候