一段代码 简单总结Vue生命周期

<div id="app">
    <sub-component :num=this.num v-if="this.num < 2"></sub-component>
</div>
复制代码

const subComponent = {
  template: '<h3>{{ num }}</h3>',
  props: ['num'],
  beforeCreate(){
    console.log('subComponent beforeCreate')
  },
  created() {
    console.log('subComponent creted')
  },
  beforeMount() {
    console.log('subComponent beforeMount')
  },
  mounted(){
    console.log('subComponent mouted')
  },
  beforeUpdate() {
    console.log('subComponent beforeUpdate')
  },
  updated() {
    console.log('subComponent updated')
  },
  beforeDestroy() {
    console.log('subComponent beforeDestroy')
  },
  destroyed() {
    console.log('subComponent destroyed')
  }
}


const mv = new Vue({
  el:'#app',
  data:{
    num:0
  },
  beforeCreate(){
  console.log('parent beforeCreate')
},
  created(){
    console.log('parent created')
    // this.num++
    setTimeout(() => {this.num++},1000)
    setTimeout(() => {this.num++},2000)
  },
  beforeMount() {
    console.log('parent beforeMount')
  },
  mounted() {
    console.log('parent mounted')
  },
  components: {
    subComponent
  },
})

复制代码

console输出：

"parent beforeCreate"
"parent created"
"parent beforeMount"

"subComponent beforeCreate"
"subComponent creted"
"subComponent beforeMount"
"subComponent mouted"

"parent mounted"

"subComponent beforeUpdate"
"subComponent updated"

"subComponent beforeDestroy"
"subComponent destroyed"
复制代码

生命周期图示：