Vue生命周期及父子组件生命周期的加载顺序

Vue⽣命周期及⽗⼦组件⽣命周期的加载顺序在使⽤Vue的过程中
⾸先接触到的就是⽣命周期
Vue的⽣命周期分为⼋个阶段
过程如下图所⽰
beforeCreate：
此阶段data和$el都未被创建，在组件创建前触发
beforeCreate() {
console.log(this.test); //undefined
console.log(this.$el); //undefined
},
created：
在组件创建后触发，已经完成了数据观测，对Vue对象的Props、Methods、Data、computed、watch进⾏初始化
在这个阶段可以检测到data、但是$el依旧未被建⽴
created() {
console.log(this.test); //true
console.log(this.$el); //undefined
},
beforeMounted：
在组件挂载到页⾯前触发，
虽然输出的和created没有区别但实际上在这个周期进⾏了 el 和 template 的检查为DOM节点挂载做准备
beforeMount() {
console.log(this.test); //true
console.log(this.$el); //undefined
},
mounted：
在组件挂载到页⾯后触发，此时$el创建
mounted() {
console.log(this.test); //true
console.log(this.$el); //<div id="app">...</div>
},
到这⾥，⼀个Vue的初始化就结束了
ps：keep-alive的组件再次渲染时不会触发created、mounted等钩⼦函数
beforeUpdate：
Vue具有响应式原理即能够监测到数据的变化
当视图层的数据即将被更新前，就会触发这个⽣命周期，这个阶段主要可以⽤在得知哪个组件即将发⽣数据改动，并且可以移除对其绑定的事件监听器。

updated：
此阶段已经重新渲染完成数据更新后的状态，并且要注意在此期间更改状态，如果要更改官⽅建议使⽤computed或watch来进⾏数据更改。

（强调！！如果有疑问可以⾃⼰在updated中更改视图数据试⼀下相信你就理解了）
beforeUpdate与updated的区别：
beforeUpdate如上⾯所说，是在视图层数据更新前进⾏的操作，
mounted触发数据更新后，在beforeUpdate中对数据进⾏操作，此时视图还未更新，所以对数据进⾏更改后不会再次触发beforeUpdate
如下所⽰：
<template>
<div id="app">
<div>{{value}}</div>
</div>
</template>
<script>
export default {
data() {
return {
value:0,
}
},
mounted() {
this.value += 1;
console.log(this.value);
},
beforeUpdate() {
this.value += 1;
console.log(this.value);
},
updated() {
console.log(this.value);
},
}
</script>
如果在updated中更改数据，此时视图已经更新，updated中的操作导致数据再⼀次变化，引发了视图层再⼀次更新，从⽽触发了beforeUpdate和update，但是因为视图层对⽐后发现数据相同，所以不会再次触发beforeUpdate和update
<template>
<div id="app">
<div>{{value}}</div>
</div>
</template>
<script>
export default {
data() {
return {
value:0,
}
},
mounted() {
this.value += 1;
console.log("mounted",this.value);
},
beforeUpdate() {
console.log("beforeUpdate",this.value);
},
updated() {
this.value = 12;
console.log("updated",this.value);
},
}
</script>
但是如果将updated中的代码改成动态的操作
export default {
data() {
return {
value:0,
}
},
mounted() {
this.value += 1;
console.log("mounted",this.value);
},
beforeUpdate() {
console.log("beforeUpdate",this.value);
},
updated() {
this.value += 1;
console.log("updated",this.value);
},
}
会陷⼊死循环
这也是为什么之前说建议使⽤computed或watch来进⾏数据更改
beforeDestroy：
当组件销毁前会进⾏的操作，在这⾥可以注销监听事件
destroyed：
绑定的watcher、child components以及event listeners等等已经与原本元素毫⽆关联了，但是⽗组件已经渲染在 DOM 上的视图仍然会保留在页⾯上，只有⼦组件会完全消失。

如果存在使⽤了keep-alive的组件
会触发activated、deactivated
activated：
当使⽤keep-alive的组件渲染时触发
deactivated：
当使⽤keep-alive的组件销毁时会触发
Vue⽗⼦组件的执⾏顺序：
加载渲染时：
⽗组件beforeCreate
⽗组件 beforeCreate
⽗组件 created
⽗组件 beforeMount
⼦组件 beforeCreate
⼦组件 created
⼦组件 beforeMount
⼦组件 mounted
⽗组件 mounted
更新时：
⽗组件 beforeUpdate
⼦组件 beforeUpdate
⼦组件 updated
⽗组件 updated
销毁时：
⽗组件 beforeDestroy
⼦组件 beforeDestroy
⼦组件 destroyed
⽗组件 destoryed
* data：与Vue实例相关的对象响应式的data * $el：与Vue实例关联的DOM元素
官⽹：
参考资料：⽣命周期
⽣命周期
beforeUpdate与updated。