“笨“方法学习Vue生命周期

一：前言

笔者最近在学习Vue，听说学好了Vue的生命周期就学懂了一半的Vue。所以，建议大家认真学好。
接下来，笔者将会用"笨"方法来讲解Vue的生命周期。
讲解版本：Vue.js v2.6.11

二：操作

1.简介

Vue的生命周期也叫钩子函数，是Vue从创建到销毁所触发的函数。
详细点就是从开始创建、初始化数据、编译模板、挂载Dom、渲染->更新->渲染、销毁等一系列操作。

2.文字版

Vue的生命周期包含了八个生命周期方法。
笔者把它分成分成三个阶段：

一：创建阶段生命周期方法：

①beforeCreate();

beforeCreate(){
console.log("创建之前");
}

表示实例完全被创建之前执行。此时data和methods中的数据和方法都还没有被初始化。在这里获取不到data中的数据。
②created();

created(){
console.log("创建完成");
}

data和methods被初始化好了。在这里操作不了data中的数据，也调用不了methods中的方法，最早只能在created中操作或调用。
③beforeMount();

beforeMount(){
console.log("挂载之前");
}

内存中已经编译好了模板，但是没有把模板渲染到页面上。
④mounted();

mounted(){
console.log("挂载完成");
}

内存中的模板已经挂载到页面中，用户可以看到渲染好的页面。

二：运行阶段生命周期方法：

⑤beforeUpdate();

beforeUpdate(){
console.log("页面上元素的内容:" + document.getElementById("h3").innerText); 
console.log("data中的msg数据是:" + this.msg);
}

这里执行方法时，页面中的数据还是旧的，data中的数据是最新的，页面尚未和最新的数据保持同步。
⑥updated();

updated(){
console.log("更新完成"+this.message);
console.log("页面上元素的内容:" + document.getElementById("h3").innerText); 
console.log("data中的msg数据是:" + this.msg);
}

这里执行方法时，页面和data中的数据已经保持同步了，都是最新的。

三：销毁阶段的生命周期方法：

⑦beforeDestroy();

beforeDestroy(){
console.log("销毁之前");
}

这里表示Vue实例即将销毁，但是还未销毁，实例中的数据都可以使用。
⑧destroyed();

destroyed(){
console.log("销毁了");
}

这里表示Vue实例完全销毁，实例中的任何内容都不能被使用了。

补充说明：
这个new出来的app对象就是Vue实例。

var app = new Vue({
	el: '#app',
	data: {
		msg: "hello world!"
	},
	methods:{
		onclicktest: function(){
			console.log("It is an onclicktest function!");
		}
	}
})

3.图解版

笔者将官网的生命周期图加了注解，制作出这张图解版生命周期图。

三：尾言

Vue实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。