Vue's life cycle
The life cycle of Vue is the knowledge that every front-end staff who uses the Vue framework needs to master, and use it as a record.
The life cycle of Vue is the whole process from creation to destruction of the Vue instance, that is, the beginning of new Vue() is the beginning of the life cycle of Vue. A Vue instance has a complete life cycle, that is, a series of processes from the beginning of creation, initialization of data, compilation of templates, mounting of Dom -> rendering, update -> rendering, unloading, etc. This is called the life cycle of Vue. The hook function is an interface open to the outside world for programmers to operate Vue at each stage in the Vue life cycle. Vue has 8 hook functions.
Borrow Yang Siyue's illustration of the Vue life cycle.
beforeCreate (before creation)
At this time, after the instance is created, el and data are not initialized, and data and method cannot be accessed. Generally, no operations are performed at this stage
beforeCreate() {
console.log('----beforeCreate----')
console.log(this.msg) //undefined
console.log(this.$el) //undefined
},
created (after creation)
At this time, the data and method in the vue instance have been initialized, and the properties have also been bound, but at this time it is still a virtual dom, because the dom has not yet been generated, and $el is not yet available. At this time, the data and methods of data and method can be called. The created hook function is the earliest that can call data and method, so the data is generally initialized here.
created() {
console.log('----created----')
console.log(this.msg) //msg
console.log(this.$el) //undefined
},
beforeMount (before mounting)
the template has been compiled at this time, but it has not been rendered to the page (that is, the virtual dom is loaded as a real dom), and el will be displayed if el exists. Here is the last chance to change the data before rendering, without triggering other hook functions, and you can generally get the initial data here.
When in the vue instance, el is the mount target, and el is not defined, then this.el displays undefined, but the mount target can also be identified if there is a template in the page, because the template can be regarded as a placeholder. If defined it is displayed
beforeMount() {
console.log('----beforeMount----')
console.log(this.msg) //msg
console.log(this.$el) //undefined
},
Mounted (after mounting)
the template has been rendered into a real DOM at this time, and the user can already see the rendered page, and the data of the page is also displayed in data through two-way binding. The last life cycle function during the instance creation period, when mounted is executed, it means that the instance has been completely created. At this time, if there is no other operation, this instance will lie quietly in our memory. at every turn.
mounted() {
console.log('----mounted----')
console.log(this.msg) //msg
console.log(this.$el) //<div id="app"><span model="msg"></span></div>
},
Create a Vue example
<template>
<div id="app">
<span :model="msg"></span>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
msg: 'msg',
}
},
beforeCreate() {
console.log('----beforeCreate----')
console.log(this.msg) //msg
console.log(this.$el) //undefined
},
created() {
console.log('----created----')
console.log(this.msg)
console.log(this.$el)
},
beforeMount() {
console.log('----beforeMount----')
console.log(this.msg)
console.log(this.$el)
},
mounted() {
console.log('----mounted----')
console.log(this.msg)
console.log(this.$el)
},
}
</script>
Result:
beforeUpdate
updates the state (before the data in the view layer changes, not before the data in the data changes), triggers before re-rendering, and then Vue's virtual dom mechanism will rebuild the virtual dom and the last virtual dom tree using the diff algorithm Re-render after comparison. Only data changes on the view will trigger beforeUpdate and updated, and data changes that only belong to data cannot be triggered.
The updated
data has been changed, and the dom has been re-rendered.
update instance
<template>
<div id="app">
<div style="height:50px"
ref="spanRef">{
{
msg}}</div>
<button @click="clickBtn"></button>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
msg: 'msg',
}
},
methods: {
clickBtn() {
this.msg = 'newMsg'
},
},
beforeUpdate() {
console.log('----beforeUpdate----')
console.log(this.$refs.$el)
console.log(this.msg) //msg
},
updated() {
console.log('----updated----')
console.log(this.$refs.$el)
console.log(this.msg) //msg
},
}
</script>
Add a button, bind the click event to the button, and update the data after clicking.
There is a discrepancy with the vue icon here. The vue icon shows that in the beforeUpdate stage, only the data in the data has changed, and the attempt has not been updated. The view is still Old data, but in the example, the beforeUpdate hook function prints el to see that the data in the view has been updated. After consulting the data, I found that the data update of the view layer will trigger beforeUpdate and updated. If some data in data is updated, but this data is not bound to the view layer, the hook function will not be triggered at this time. But after thinking about it, I found that it was still wrong. What was explained above is that when the data applied by the view layer is updated, the hook function is triggered.
At this time, the pressure came to me. After thinking about it, I suddenly thought of console.log(this.refs.refs .ref s . el) This output code, after adding the delay code to beforeUpdate , I realized, console.log(this.refs.refs.ref s . el) outputs the el when the data is updated
beforeUpdate() {
console.log('----beforeUpdate----')
console.log(this.$el)
console.log(this.msg) //msg
for (var i = 0; i <= 10000; i++) {
console.log(1)
}
},
this.$el will wait until the data update is complete before outputting el.
beforeDestroy
is executed before it is destroyed (it will be executed when the $destroy method is called), and it is generally here to deal with the aftermath: clear timers, clear non-instruction-bound events, etc...')
After destroyed
(the Dom element exists, but it is no longer controlled by vue), unload the watcher, event listener, and subcomponents.