VUE Instance object
  new Vue({
   
    el:"body"；Indicates the location of the mount,
    template:'<div>{{fruit}}</div>' ,Mounted template
    data:{
      fruit:"apple"
    }
    conponents:{App} Other components introduced

}
    
   

Life cycle of VUE:

vue has 8 life cycle functions:

Test code:
Try to write the component template yourself, and paste the js code here
(omit some codes)

export default {
  data () {
    return {
      todos: [],
      allCounts: 0,
      filter: 'all',
      id: 0,
      states: ['all', 'active', 'completed']
    }
  },
  beforeCreate () {
    console.log('==============' + 'beforeCreated' + '===================')
    console.log(this.$el)
    console.log(this.$data)
    console.log(this.filter)
  },
  created () {
    console.log('==============' + 'created' + '===================')
    console.log(this.$el)
    console.log(this.$data)
    console.log(this.filter)
  },
  beforeMount () {
    console.log('==============' + 'beforeMount' + '===================')
    console.log(this.$el)
    console.log(this.$data)
    console.log(this.filter)
  },
  mounted () {
    console.log('==============' + 'mounted' + '===================')
    console.log(this.$el)
    console.log(this.$data)
    console.log(this.filter)
  },
  beforeUpdate () {
    console.log('==============' + 'beforeUpdate' + '===================')
    console.log(this.$el)
    console.log(this.$data)
    console.log(this.filter)
  },
  updated () {
    console.log('==============' + 'updated' + '===================')
    console.log(this.$el)
    console.log(this.$data)
    console.log(this.filter)
  },
  beforeDestroy () {
    console.log('==============' + 'beforeDestroy' + '===================')
    console.log(this.$el)
    console.log(this.$data)
    console.log(this.filter)
  },
  destroyed () {
    console.log('==============' + 'destroyed' + '===================')
    console.log(this.$el)
    console.log(this.$data)
    console.log(this.filter)
  }
 }

effect:

As for destroyed, it's not easy to demonstrate.
There is one thing to note about the destroyed hook function: after executing the destroy method, the change of data will not trigger the periodic function again. At this time, the vue instance has released the event listening and binding with DOM, but the DOM structure still exists. Therefore, for the notification component displayed in real time, before it is destroyed, we must manually remove the node with removeChild(); Otherwise, DOM nodes still exist, affecting browser performance.

Another point needs to be added:
Component application life cycle:
Parent component: tabs
Sub components: tab, tab container
My application scenario is:

<tabs>
  <tab />
  <tab />
  <tab />
  <tab-container />
</tabs>

• 1
• 2
• 3
• 4
• 5
• 6

/*tabs Print code for*/
  beforeMount () {
    console.log('============Tabs befortemounted==============')
  },
  mounted () {
    console.log('============Tabs mounted==============')
  },
  created () {
    console.log('============Tabs created==============')
  }

/*tab Print code for*/
  beforeMount () {
    console.log('----------------tab beforemounted-------------')
  },
  mounted () {
    this.$parent.panes.push(this)
    console.log('----------------tab mounted-------------')
  },
  created () {
    console.log('----------------tab created-------------')
  }

/*tab-container Print code for*/
  beforeMount () {
    console.log('!!!!!!!!!!!!!!!!tab container beforemounted!!!!!!!!!!!!!!!!!')
  },
  mounted () {
    console.log('!!!!!!!!!!!!!tab container mounted!!!!!!!!!!!!!!!!!')
  },
  created () {
    console.log('!!!!!!!!!!!!!!!!!!!!!tab container created!!!!!!!!!!!!!!!!!!!!!!!')
  }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33

Browser results:

Conclusion: first execute the created and beforeMounted functions of the parent component; Then execute the created and beforeMounted functions of the sub components according to the use order of the sub components; Still execute the mounted function according to the execution order of the child components, and finally the mounted function of the parent component;
That is, when the parent component is ready to be mounted, the child component will be mounted first, and then the parent component will be mounted; Therefore, before the whole large component is mounted, the data between the internal child component and the parent component can flow (it's hard to express...)

Reference address: https://blog.csdn.net/qq_35585701/article/details/81216704