生命周期函数在父子组件中的先后执行顺序

父组件代码:

beforeCreate() {
// 1. 创建前 
console.log("beforeCreate --- 父组件实例初始化前") }, 
created() { 
// 2. 创建后=> 发送ajax请求 
onsole.log("created --- 父组件实例初始化后") }, 
beforeMount() { 
// 3. 挂载前 
console.log("beforeMount --- 父组件vue的虚拟DOM, 挂载到真实的网页之前") }, 
mounted() { 
// 4. 挂载后=> 操作dom 
console.log("mounted --- 父组件vue的虚拟DOM, 挂载到真实的网页上 ") }, 
beforeUpdate() { 
// 5. 更新前 
 console.log("beforeUpdate --- 父组件数据更新, 页面更新前") }, 
updated() { 
// 6. 更新后 
console.log("updated --- 父组件数据更新, 页面更新后") }, 
beforeDestroy() { 
// 7. 销毁前 
console.log("beforeDestroy --- 父组件实例销毁之前调用") }, 
destroyed() { 
// 8. 销毁后 
console.log("destroyed --- 父组件销毁完成") },

子组件代码

beforeCreate() { 
// 1. 创建前 
console.log("beforeCreate --- 子组件实例初始化前") }, 
created() { 
// 2. 创建后=> 发送ajax请求 
console.log("created --- 子组件实例初始化后") }, 
beforeMount() { 
// 3. 挂载前 
console.log("beforeMount --- 子组件vue的虚拟DOM, 挂载到真实的网页之前") }, 
mounted() { 
// 4. 挂载后=> 操作dom 
console.log("mounted --- 子组件vue的虚拟DOM, 挂载到真实的网页上 ") }, 
beforeUpdate() { 
// 5. 更新前 
console.log("beforeUpdate --- 子组件数据更新, 页面更新前") }, 
updated() { 
// 6. 更新后 
console.log("updated --- 子组件数据更新, 页面更新后") }, 
beforeDestroy() { 
// 7. 销毁前 
console.log("beforeDestroy --- 子组件实例销毁之前调用") }, 
destroyed() { 
// 8. 销毁后 
console.log("destroyed --- 子组件销毁完成") },

父子组件生命周期执行顺序

加载渲染过程

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

更新过程

父beforeUpdate->子beforeUpdate->子updated->父updated

销毁过程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

常用钩子简易版

父create->子created->子mounted->父mounted

单一组件钩子执行顺序

> activated, deactivated 是组件keep-alive时独有的钩子
1.  beforeCreate
2.  created
3.  beforeMount
4.  mounted
5.  beforeUpdate
6.  updated
7.  activated
8.  deactivated
9.  beforeDestroy
10.  destroyed
11.  errorCaptured