The life cycle of Vue
Introduction to life cycle
Each Vue instance goes through a series of initialization processes when it is created-for example, you need to set up data monitoring, compile templates, mount the instance to the DOM, and update the DOM when the data changes. At the same time, some functions called life cycle hooks will be run during this process, which gives us the opportunity to add our own code at different stages.
Life cycle diagram
Life cycle diagram
new Vue () ----> means to start creating a vue instance object
Init Events & Lifecycle ----> Indicates that a Vue empty instance object has just been initialized. At this time, there are only default life cycle functions and events in this instance object, and no other elements have been created.
beforeCreated ----> When this life cycle function is executed, the data in data and methods has not been initialized
created ----> In this function, both data and methods have been initialized. If you need to manipulate the data in data or call the methods in methods, you can only do it in the created function
Has ‘el’ option? —— Created vm.$el and replace ‘el’ with it ----> means that vue starts to edit the template, execute instructions, and finally generates a compiled final template string in memory, and then renders the template string to the DOM in memory. At this time, it's just in memory The template is rendered, but the template is not mounted on the page
beforeMount ----> When this function is executed, the template has been compiled in memory, but it has not been mounted on the page, and the page is still old data
Created vm.$el and replace ‘el’ with it ----> Replace the compiled template in the memory to the browser page
beforeUpdated ----> When this function is executed, the data in the page is still old, the data in the data is the latest at this time, the page has not been synchronized with the latest data
updated ----> Indicates that the data in data can be updated to the page, and the page is also the latest data
beforeDestroy----> When this function is executed, the vue instance has entered the destruction phase from the runtime phase. At this point, all data, methods, filters, and instructions on the instance are in a usable state, and the destruction operation has not been actually executed.
destroyed ----> The hook function of the last destruction stage of the life cycle, it is not destroyed manually, but destroyed by the vue instance itself
In the entire life cycle of Vue, there are many hook functions for us to operate at different times. Vue provides us with 8 hook functions:
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdated
- updated
- beforeDestroy
- destroyed
The following describes these hook functions one by one
Vue creation stage
beforeCreate
The first hook function in the life cycle means that it will be executed before it is completely created
It can be illustrated by examples:
<div id="app">
<h1 id="h1">{
{msg}}</h1>
</div>
<script>
// 创建vue实例 得到ViewModel
var vm=new Vue({
el:'#app',
data:{
msg:'ok'
},
methods: {
show(){
console.log('执行了show方法');
}
},
beforeCreate() {
console.log(this.msg);
this.show();
},
})
</script>
We can see that the data is output in the beforeCreate function. The output result is undefinedthat an error will be reported when the show method is called, which means that the data in data and methods have not been initialized when the function is executed.
created
The second hook function in the life cycle indicates that the data in data and methods has been initialized
created() {
console.log(this.msg);
this.show();
}
It can be found that calling the data in data and methods in the created function is completely ok (can only be called in the created function), which means that the data in data and methods have been initialized at this time
beforeMount
The third hook function of the life cycle indicates that the template string has been compiled in memory, but has not been mounted to the page, and the page is still the original data
beforeMount() {
console.log(document.getElementById('h1').innerText);
}
We can see that it does not mount the rendered data to the page, so the output{
{msg}}
mounted
The fourth hook function in the life cycle indicates that the template rendered in the memory has been mounted to the page
mounted() {
console.log(document.getElementById('h1').innerText);
// 注意: mounted 是实例创建期间 的最后一个生命周期函数, 当执行 mounted就表示,
// 该实例 已经被完全创建好了, 此时, 如果没有其他操作的话, 这个实例 就静静的 躺在我们的内存中, 一动不动
}
It can be found that this function can render msg data to the page
Precautions:
Mounted is the last life cycle function during instance creation. When mounted is executed, it means that the instance has been completely created.
At this time, if there is no other operation, the instance will be lying motionless in our memory. ~~
Vue runtime
beforeUpdate
The fifth hook function of the life cycle indicates that the data in data is the latest, but the original data in the page is still
<input type="button" value="修改msg" @click="msg='NO'">
beforeUpdate() {
console.log('界面上元素的内容:'+document.getElementById('h1').innerText);
console.log('data中的msg数据是:'+this.msg);
}
At this point, the original data in msg is ok, adding an event changes the msg data to NO, so this.datathe msg that comes out is NO, but document.getElementByIdthe data obtained through the interface is still ok
updated
The sixth hook function of the life cycle means that the data in data can be updated to the page at this time, and the page is the latest data
<input type="button" value="修改msg" @click="msg='NO'">
Update() {
console.log('界面上元素的内容:'+document.getElementById('h1').innerText); // no
console.log('data中的msg数据是:'+this.msg); // no
}
At this time, this.datathe msg document.getElementByIdoutput is NO, and the data obtained through the interface is also NO
Vue destruction phase
beforeDestroy
The seventh hook function of the life cycle. When this function is executed, the vue instance has entered the destruction phase from the runtime phase. At this point, all data, methods, filters, and instructions on the instance are in a usable state, and the destruction operation has not been actually executed.
destroyed
The hook function of the last destruction stage of the life cycle is not destroyed manually, but destroyed by the vue instance itself.