生命周期

父子组件加载渲染过程

• 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
• 子组件更新过程
• 父beforeUpdate->子beforeUpdate->子updated->父updated
• 父组件更新过程
• 父beforeUpdate->父updated
• 销毁过程
• 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

一个父组件嵌套A B两个子组件此时AB组件的执行顺序

（在父组件中先书写A组件在书写B组件）

  <A  :msg="msg" />
  <B  :msg="msg" />

执行顺序

father beforeCreate
father created
father beforeMount
A beforeCreate
A created
A beforeMount
B beforeCreate
B created
B beforeMount
A moutend
B moutend
father moutend

父组件的更新data中的数据会调用 father beforeUplate,子组件props如果产生更新，子组件会调用到 sun beforeUptate 和sun uptated。但是子组件不会初始化data（如果想要子组件初始化data，可以在子组件引用的时候套上v-if） 或者通过watch或者computed监听data。

//父组件
<template>
  <A  :msg="msg" />
  <B  :msg="msg" />

</template>

<script>
import A from './components/A.vue'
import B from './components/B.vue'
export default {
  name: 'App',
  components: {
    A,
    B,
  },
  data(){
      return{
          msg:'11',
          flag:false,
      }
  },
  beforeCreate(){
      console.log('father beforeCreate')
  },
  created(){
      console.log('father created')
  },
  beforeMount(){
      console.log('father beforeMount')
  },
  mounted(){
      console.log('father mounted')
      setTimeout(()=>{
          this.flag = '1111111';
      },3000)
  },
  beforeUpdate(){
      console.log('father beforeUpdate')
  },
  updated(){
      console.log('father updated')
  },
  beforeUnmount(){
      console.log('father beforeUnmount')
  },
  unmounted(){
      console.log('father unmounted')
  }
}
</script>

//子组件
<template>
  <div class="hello">
    <h1>{{ info }}</h1>
  </div>
</template>

<script>
export default {
  name: 'A',
  props: {
    msg: {
        type:String
    }
  },
  data(){
      return{
          info:this.msg
      }
  },
  beforeCreate(){
      console.log('A beforeCreate')
  },
  created(){
      console.log('A created')
  },
  beforeMount(){
      console.log('A beforeMount')
  },
  mounted(){
      console.log('A mounted')
  },
  beforeUpdate(){
      console.log('A beforeUpdate')
  },
  updated(){
      console.log('sun updated')
  },
  beforeUnmount(){
      console.log('sun beforeUnmount')
  },
  unmounted(){
      console.log('sun unmounted')
  }
}
</script>