定义:
从组件诞生到销毁的全过程。
四个过程; 初始化---------->挂载----------------->更新---------------------->销毁
八大周期:beforeCreated---------------------->Created-------------------->beforeMount-------------->
Mount------------------->beforeDestory------------------------->Destory
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
初始化
1.beforeCreated
在这个阶段会初始化一些东西，初始化data中的数据，methods中的方法，计算属性computed,以及this的指向等。
2.Created
初始化完毕，可以使用data中的数据，methods中的方法。
挂载
3.beforeMount
在这个阶段里面,会把模板给编译完成,这也是最后一次对data中的数据进行更改的机会，因为马上就要去进行挂载。
4.Mount
找到容器,挂载到页面上，此时可以对DOM进行操作了。
更新
5.beforeUpdated
当数据发生更新的时候,这个周期会进行一些相应的操作,会产生一份新的虚拟节点，和上一份虚拟节点最大化的进行对比，以完成最大程度地渲染。
6.Updated
页面中的data此时是最新的了。
销毁
7.beforeDestory
在这个阶段，为组件的销毁前做准备,组件还没有完全的得到销毁，任然可以使用到DOM。
8.Destory
组件销毁。
过代码来看生命周期
<template>
<div class="">
<h1 ref="aa">{{ messasge }}</h1>
<button @click="fn">点击</button>
</div>
</template>
<script>
export default {
data() {
return {
messasge: "张三",
};
},
// 初始化之前
beforeCreate() {
console.log(this.messasge, "初始化数据阶段");
},
// 初始化完毕
created() {
console.log(this.messasge, "初始化好了");
},
// 挂载前,对数据的最后一次进行更改,编译完毕,马上将要挂载
beforeMount() {
console.log(this.messasge, "编译完毕,将要进行挂载");
console.log(this.$refs.aa.innerHTML, "还没有进行挂载,获取不了");
},
// 编译完毕,将要去实现挂载
mounted() {
console.log(this.$refs.aa.innerHTML, "能够获取到真实的DOM");
},
beforeUpdate() {
// 当data里面的数据发生更新的时候,产生一份虚拟节点他，通过diff算法完成最大化的渲染，
console.log(
this.$refs.aa.innerHTML,
"通过diff算法比对准备更新,数据还是之前的"
);
},
updated() {
//data里面的数据和页面中此时是最新的了。
console.log(this.$refs.aa.innerHTML, "更新完的");
},
beforeDestroy() {
//为组件的销毁前做一些准备
console.log("销毁前最后的挣扎");
},
Destroyed() {
console.log("组件得到销毁");
// 组件已经完全销毁
},
name: "",
methods: {
fn() {
this.messasge = 22222222;
},
},
};
</script>
<style scoped></style>
view图:
? ?
总结:
在beforeCreated进行初始化一些methods方法，data里面的数据,computed里面的计算属性。
在Created里面能够使用data里面的数据和methods的方法了。
在beforeMount里面进行编译，此时模板已经编译完成，但没有进行挂载。
在Mount里面挂载完成，能够获取到真实的DOM
在beforeUpdated里面，当数据更新的时候新的Vnode和旧的Vnode会进行对比，通过Diff算法完成最优化的处理,渲染出Dom。
在Updated阶段，此时数据已经更新完毕，data里面的数据是最新的了。
在beforeDestory阶段，此时在为销毁前做一些准备，组件还是能够使用的。
在Destory阶段,组件已经完全得到销毁。
