vue 父子组件生命周期关系
时间: 2023-10-27 21:43:38 浏览: 147
Vue父组件监听子组件生命周期
在 Vue 中,父组件和子组件都有自己的生命周期钩子函数。下面是父子组件生命周期的关系:
1. 父组件 beforeCreate 钩子函数执行后,创建子组件实例
2. 子组件 beforeCreate 钩子函数执行,执行父组件 created 钩子函数
3. 父组件 created 钩子函数执行完成,执行子组件 created 钩子函数
4. 子组件 created 钩子函数执行完成,执行父组件 mounted 钩子函数
5. 父组件 mounted 钩子函数执行完成,执行子组件 mounted 钩子函数
6. 子组件 mounted 钩子函数执行完成,父子组件都已经挂载完成
7. 父组件 beforeUpdate 钩子函数执行后,执行子组件 beforeUpdate 钩子函数
8. 子组件 beforeUpdate 钩子函数执行完成,执行父组件 beforeUpdate 钩子函数
9. 父组件 updated 钩子函数执行完成,执行子组件 updated 钩子函数
10. 子组件 updated 钩子函数执行完成,父子组件都已经更新完成
11. 父组件 beforeDestroy 钩子函数执行后,执行子组件 beforeDestroy 钩子函数
12. 子组件 beforeDestroy 钩子函数执行完成,执行父组件 beforeDestroy 钩子函数
13. 父组件 destroyed 钩子函数执行完成,执行子组件 destroyed 钩子函数
14. 子组件 destroyed 钩子函数执行完成,父子组件都已经销毁完成
总结一下,父子组件的生命周期钩子函数执行顺序是:
beforeCreate -> created -> mounted -> beforeUpdate -> updated -> beforeDestroy -> destroyed
其中,父组件的生命周期钩子函数先于子组件执行。而在销毁时,子组件的生命周期钩子函数先于父组件执行。
阅读全文