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