VUE topic - Lecture 1

  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:

Hook function Triggered behavior What can be done at this stage
beforeCreadted The mount element $el and data object data of vue instance are undefined and have not been initialized. Add loading event
created The data object of vue instance is data, but $el is not End loading and request data to prepare for mounted rendering
beforeMount The $el and data of the vue instance are initialized, but they are still virtual dom nodes, specifically data Filter has not been replaced. ..
mounted vue instance mounting completed, data Filter successfully rendered Used with routing hook
beforeUpdate Triggered when data is updated  
updated Triggered when data is updated When updating the data, do some processing (here you can also use watch for observation)
beforeDestroy Triggered when a component is destroyed  
destroyed Triggered when the component is destroyed, the vue instance releases the event listening and binding with DOM (no response), but the DOM node still exists Prompt when component is destroyed

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

Posted by spires on Wed, 18 May 2022 16:36:29 +0300