Ok, I will try to explain the life cycle of vUE according to this picture + code
new Vue()
Create a VUE instance. Only when a VUE instance is created will there be a VUE lifecycle. In a VUE project, each VUE component counts as a VUE instance, meaning that each component has its own life cycle.
init Events & Lifecycle
Initialize events and life cycles. But!!! The data broker has not yet started at this point
beforeCreate
Vue first life cycle, literally before creation. At this point, you cannot access any data in the instance object
<template>
<div>
{{msg}}
</div>
</template>
<script>
export default {
data(){
return{
msg:'Jsnewbie'}},beforeCreate(){
console.log('beforeCreate'.this)
debugger}}</script>
Copy the code
The debug code is visible from the console. “BeforeCreate” does output, but this(VM, that is, vUE instance object) does not have the data we wrote in data
init injections & reactivity
At this point, it’s still initialization. Initialize data monitoring and data brokers. When this is done, the second lifecycle of vue is created
created
During the second life cycle of the VUE, the instance is created and the data in the vue instance can be accessed through this
<script>
export default {
data(){
return{
msg:'Jsnewbie'}},beforeCreate(){
console.log('beforeCreate')},created(){
console.log("created")
console.log(this)
debugger}}Copy the code
You can see from the console that the data broker and data monitoring are complete. We can access the data in the VUE instance normally
beforeMount
The third life cycle of vUE is before mount. As you can see, between Created and beforeMount, Vue makes a lot of decisions, such as whether there is a root tag in the page, whether there is a Templete option, etc. The only reason it makes these decisions is to parse the template and generate the virtual DOM in memory. At this point, the virtual DOM is not inserted into the real DOM on the page before mounting, and the page is rendered with an uncompiled structure
<body>
<div id="root">
<h2>The data in the MSG {{MSG}}</h2>
</div>
</body>
<script>
Vue.config.productionTip=false
new Vue({
el:"#root".data: {msg:"Jsnewbie"
},
beforeCreate(){
console.log('beforeCreate')},created(){
console.log("created")},beforeMount(){
console.log("beforeMount")
debugger}})</script>
Copy the code
At this point, we can see that the page is still the original DOM structure before mounting, and the virtual DOM is not inserted into the real DOM of the page (the code here is different from the previous two lifecycle code). The above code is cli created and does not do a very good job of illustrating the problem.
created
Vue’s fourth life cycle mount is complete. At this point, vUE inserts the virtual DMO into the real DOM on the page
new Vue({
el:"#root".data: {msg:"Jsnewbie"
},
beforeCreate(){
console.log('beforeCreate')},created(){
console.log("created")},beforeMount(){
console.log("beforeMount")},mounted(){
console.log("mounted")}})Copy the code
At this point, the VUE initialization process is complete. We can do some initialization during this life cycle, such as starting a timer. Send requests and so on
beforeUpdate
The fifth vUE life cycle precedes the update
new Vue({
el:"#root".data: {msg:"Jsnewbie"
},
methods: {changeMsg(){
this.msg = "Jsnewbie666"}},beforeCreate(){
console.log('beforeCreate')},created(){
console.log("created")},beforeMount(){
console.log("beforeMount")},mounted(){
console.log("mounted")},beforeUpdate(){
console.log("beforeUpdate")
console.log(this.msg)
debugger}})Copy the code
Note: As you can see from the console, the MSG in data is not the same as the MSG in the page before the update
Virtual DOM re-render and patch
Between before and after the update, vUE generates a new virtual DOM based on the updated data and compares it with the old virtual DOM. The update operation is finally complete
updated
Vue’s fifth lifecycle update is complete
new Vue({
el:"#root".data: {msg:"Jsnewbie"
},
methods: {changeMsg(){
this.msg = "Jsnewbie666"}},beforeCreate(){
console.log('beforeCreate')},created(){
console.log("created")},beforeMount(){
console.log("beforeMount")},mounted(){
console.log("mounted")},beforeUpdate(){
console.log("beforeUpdate")},updated(){
console.log("updated")
console.log(this.msg)
debugger}})Copy the code
beforeDestory & destory
These are the last two life cycles in VUE and are relatively simple.
We can do some finishing touches in beforeDestory (clear timers, etc.)
There is one more interesting thing to note here. According to the official explanation, if we call the instance object’s $destory, vue unties all of its instructions and event listeners. Go straight to code
methods:{
changeMsg(){
console.log("Data has been modified!!")
this.msg = "Jsnewbie666"
},
remove(){
console.log("Destroy vUE instance")
this.$destroy()
}
},
Copy the code
Notice that the changeMsg method is still triggered when I click on the destroyed instance first and touch the Destroyed lifecycle function. Vue will unbind all its commands and event listeners. The event listeners on the official website refer to vue custom events, not native DOM events. The @click event we bound to Button will eventually be rendered as a native DOM event by vUE!!
OK, so that’s about the vUE life cycle. The most important part of the life cycle is the initialization process, which is also the most used phase.