vue的生命周期

官网：https://cn.vuejs.org/v2/api/#beforeCreate
Vue实例从创建到销毁的过程，就是生命周期。详细来说也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。
首先我们来看一下官网的生命周期图（我自己做了一点点注释）：

 

// beforeCreate初始化之前,只做了初始化生命周期，事件，数据未进行数据代理
	beforeCreate() {
	console.log("触发的是初始化之前的生命周期函数");
	},
	// created初始化之后，数据代理,可拿取data,methods
	created() {
	console.log("触发初始化之后的生命周期函数");
	// console.log(this.a);
	// console.log(this.sum());
	// const str = this.sum();
	},
	// beforeMount挂载前，创建解析模板(虚拟DOM)
	beforeMount() {
	console.log("触发解析之前的生命周期函数");
	},
	// mounted挂载后，操作Dom
	// 通过接口请求表格数据展示，事件方法，定时器
	mounted() {
	console.log("触发解析之后的生命周期函数");
	this.demo = setInterval(()=>{
	this.opacity -= 0.01;
	if(this.opacity<=0){
	this.opacity = 1;
	}
	},20)
	},
	// beforeUpdate更新前，新的值不会同步到页面中
	beforeUpdate() {
	console.log("触发更新前的生命周期函数");
	console.log(this.n);
	},
	// updated更新后的数据，将原虚拟DOM与现在的虚拟DOM比较，更新到页面
	updated() {
	console.log("触发更新后的生命周期函数");
	},
	// beforeDestroy销毁前
	beforeDestroy() {
	console.log("触发销毁前的生命周期函数");
	clearInterval(this.demo);
	// 清除定时器
	},
	// destroyed销毁后
	destroyed() {
	console.log("触发销毁后的生命周期函数");
	},
	methods: {
	// 测试的sum
	sum(){
	return 99;
	},
	// 点击数字+1
	add(){
	this.n++;
	},
	// 点击销毁
	bye(){
	console.log("触发了bye");
	this.$destroy();//销毁
	}
	},
	})
	console.log(vm);