vue生面周期详解

vue生面周期详解

座右铭：越努力越幸运，越运动越健康。
热爱前端技术，热爱运动的（爱笑，傻傻的）这样一个人

---

<template>
  <div>
      <div id="my">
          {{message}}
          <input type="text" v-model='message' />1234t
      </div>
  </div>
</template>
 
<script>
export default {
  data () {
    return {
         message : "hello world" 
    }
  },
	//beforecreate：el 和 data 并未初始化 
	//created:完成了 data 数据的初始化，el没有
	//beforeMount：完成了 el 和 data 初始化 
	//mounted ：完成挂载
	//具体怎么用呢，通俗一些
	//beforecreate : 举个例子：可以在这加个loading事件 
	//created ：在这结束loading，还做一些初始化，实现函数自执行 
	//mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
	//beforeDestroy： 你确认删除XX吗？
	// destroyed ：当前组件已被删除，清空相关内容
	beforeCreate: function () { //beforeCreate:刚刚new Vue()之后，这个时候，数据还没有挂载呢，只是一个空壳
		console.group('beforeCreate 创建前状态===============》');
		console.log("创建前状态", "el     : " + this.$el); //undefined
		console.log("创建前状态", "data   : " + this.$data); //undefined 
		console.log("创建前状态", "message: " + this.message)  //undefined
	},
	created: function () { //created:这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数,一般可以在这里做初始数据的获取
		console.group('created 创建完毕状态===============》');
		console.log("创建完毕状态","el     : " + this.$el); //undefined
		console.log("创建完毕状态","data   : " + this.$data); //已被初始化 
		console.log("创建完毕状态","message: " + this.message); //已被初始化
	},
	beforeMount: function () { //beforeMount：虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated  接下来开始render，渲染出真实dom
		console.group('beforeMount 挂载前状态===============》');
		console.log("挂载前状态", "color:red","el     : " + (this.$el)); //已被初始化
		console.log(this.$el);  // 发现el还是 {{message}}，这里就是应用的 Virtual DOM（虚拟Dom）技术，先把坑占住了。到后面mounted挂载的时候再把值渲染进去。
		console.log("挂载前状态", "color:red","data   : " + this.$data); //已被初始化  
		console.log("挂载前状态", "color:red","message: " + this.message); //已被初始化  
	},
	mounted: function () {  //mounted：此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了
		console.group('mounted 挂载结束状态===============》');
		console.log("挂载结束状态", "color:red","el     : " + this.$el); //已被初始化
		console.log(this.$el);    //{{}}渲染
		console.log("挂载结束状态", "color:red","data   : " + this.$data); //已被初始化
		console.log("挂载结束状态", "color:red","message: " + this.message); //已被初始化 
	},
	beforeUpdate: function () {
		console.group('beforeUpdate 更新前状态===============》');
		console.log("更新前状态", "color:red","el     : " + this.$el);
		console.log(this.$el);   
		console.log("更新前状态", "color:red","data   : " + this.$data); 
		console.log("更新前状态", "color:red","message: " + this.message); 
	},
	updated: function () {
		console.group('updated 更新完成状态===============》');
		console.log("更新完成状态", "color:red","el     : " + this.$el);
		console.log(this.$el); 
		console.log("更新完成状态", "color:red","data   : " + this.$data); 
		console.log("更新完成状态", "color:red","message: " + this.message); 
	},
	beforeDestroy: function () {//beforeDestory:销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等...
		console.group('beforeDestroy 销毁前状态===============》');
		console.log("销毁前状态", "color:red","el     : " + this.$el);
		console.log(this.$el);    
		console.log("销毁前状态", "color:red","data   : " + this.$data); 
		console.log("销毁前状态", "color:red","message: " + this.message); 
	},
	destroyed: function () { //destroyed:组件的数据绑定、监听...都去掉了,只剩下dom空壳，这里也可以善后
		console.group('destroyed 销毁完成状态===============》');
		console.log("销毁完成状态", "color:red","el     : " + this.$el);
		console.log(this.$el);  
		console.log("销毁完成状态", "color:red","data   : " + this.$data); 
		console.log("销毁完成状态", "color:red","message: " + this.message)
	},
}
</script>

<style>
button._color {
    color:#f60;
}
</style>

vue生面周期8种状态
1.beforecreate：el 和 data 并未初始化

2.ceated:完成了 data 数据的初始化，el没有

3.beforemount：完成了 el 和 data 初始化 （虚拟dom状态）

4.mounted ：完成挂载（真实dom状态）注意操作dom需要在mounted之前来进行操作

5.beforeUpdate
data中数据想要改变

6.updated
data中数据改变了

7.beforeDestroy

8.destroyed