Vue 的父组件和子组件生命周期钩子函数执行顺序?
时间: 2023-09-18 09:05:54 浏览: 109
深入理解Vue父子组件生命周期执行顺序及钩子函数
在 Vue 中,父组件和子组件都有自己的生命周期钩子函数,它们的执行顺序是有一定规律的。下面是父组件和子组件常用的生命周期钩子函数执行顺序:
1. beforeCreate:先父后子;
2. created:先父后子;
3. beforeMount:先父后子;
4. mounted:先子后父;
5. beforeUpdate:先子后父;
6. updated:先子后父;
7. beforeDestroy:先子后父;
8. destroyed:先子后父。
在执行过程中,父组件的生命周期钩子函数先于子组件执行,但在 mounted 阶段时,子组件的 mounted 钩子函数先于父组件执行。这是因为在父组件 mounted 钩子函数执行时,子组件的模板已经被渲染成真实的 DOM,此时子组件的 mounted 钩子函数才会执行。
需要注意的是,在父组件的 created 钩子函数中,子组件的实例并没有被创建,只有在父组件的 mounted 钩子函数中,子组件才会被实例化。因此,在父组件的 created 钩子函数中,是无法访问子组件的实例的。
阅读全文