Life cycle of vue

The process from creation to destruction of vue instances is the life cycle. vue each component is independent, and each component has its own life cycle. Life cycle makes it easier for us to form better logic when controlling the whole vue. It can be divided into three stages: Mount stage, update stage and destroy stage.

beforeCreate: before creating
After the instance is initialized, the option object of the component has not been created, and el and data have not been initialized, so the data and methods on methods,data,computed, etc. cannot be accessed.

data() {
	return {
		num:1
	}
}
beforeCreate(){
	console.log(this.num);  // undefined
},

 

created: after creation
After the instance has been created, it is called to complete the initialization of data, but $el does not

<span ref="span">{{num}}</span>
data() {
	return {
		num:1
	}
},
created() {
	console.log(this.num)	// num
	console.log(this.$refs.span)	// undefined cannot access the dom node
}

 

But what if we want to get the dom node in created?
We can use Vue JS provides us with the $nextTick method:

created(){
  this.$nextTick(()=>{
    console.log(this.$refs.span);
  })
  console.log(this.$refs.span);	
}

 

this.$ Nexttick (() = > {}) delays the callback until after the next DOM update cycle. Use it immediately after modifying the data, and then wait for the DOM to update.
beforeMount: before loading
Before the mount, el and data are initialized. Note that dom nodes can not be accessed at this time.

<span ref="span">{{num}}</span>
data() {
	return {
		num:1
	}
},
beforeMount() {
  console.log(this.num);  // 1
  console.log(this.$refs.span);  // undefined 
},

 

mounted: after loading
After mounting, that is, the HTML in the template is rendered into the HTML page. At this time, you can generally do some ajax operations, and mounted will only execute it once.

<span ref="span">{{num}}</span>
data() {
	return {
		num:1
	}
},
mounted(){
  console.log(this.num);  // 1
  console.log(this.$refs.span);  // <span>1</span>
}

 

beforeUpdate: before update / updated: After update
beforeUpdate: called before data update, before virtual DOM re rendering and patching.
Note: the beforeUpdate and updated hook functions are triggered only when data changes are applied to the page
The msg in the following data changes, but it is not applied to the page, so two hook functions will not be triggered

<span ref="span">{{num}}</span>
<button @click="msg = 'uu'">change msg</button>
data() {
	return {
		num:1,
		msg:'Hello'
	}
},
beforeUpdate(){	// Will not trigger
  console.log(this.msg);
  console.log(this.$refs.span);
},
updated() {		// Will not trigger
  console.log(this.msg);
  console.log(this.$refs.span);
},

 

Difference between beforeUpdate and updated:

<span ref="span">{{num}}</span>
<button @click="msg = 'uu'" class="button">change{{msg}}</button>
data() {
	return {
		num:1,
		msg:'Hello'
	}
},
It refers to the call when the data has changed and the view has not been updated
beforeUpdate(){
  console.log(this.msg);
  let button = document.querySelector('.button')
  console.log(button.innerHTML);
},
After updating, the data and view are consistent
updated() {
  console.log(this.msg);
  let button = document.querySelector('.button')
  console.log(button.innerHTML);
},

 

We can see that in the updated hook function, the data is consistent with the view.
beforeDestroy: Before destruction
Before the instance is destroyed, the instance is still fully available. In this step, we usually do some reset operations, such as clearing the timer and listening dom events in the component.
Before destruction, you can also access the DOM structure and relevant data in data,
destroyed: after destruction
All event listeners will be removed and all child instances will be destroyed.
You can still access the properties in data, but you can't access the DOM structure

<span ref="span">{{num}}</span>
<button @click="$router.push('/about')">go</button>
data() {
	return {
		num:1
	}
},
beforeDestroy(){
  console.log(this.num);	// 1
  console.log(this.$refs.span);	// <span>1</span>
},
destroyed() {
  console.log(this.num);	// 1
  console.log(this.$refs.span);	// undefined
}