vue3父组件和子组件生命周期钩子的执行顺序
时间: 2023-09-18 20:05:56 浏览: 223
在Vue 3中,父组件和子组件的生命周期钩子的执行顺序如下:
1. 父组件的Create钩子会在子组件之前。
2. 子组的beforeCreate钩子会在子组件实例创建之前执行。
3. 父组件的created钩子会在子组件实例创建之后执行。
4. 子组件的created钩子会在子组件实例创建之后执行。
5. 父组件的beforeMount钩子会在子组件渲染之前执行。
6. 子组件的beforeMount钩子会在子组件渲染之前执行。
7. 子组件的mounted钩子会在子组件渲染之后执行。
8. 父组件的mounted钩子会在子组件渲染之后执行。
9. 父组件的beforeUpdate钩子会在数据更新之前执行,但在重新渲染之前。
10. 子组件的beforeUpdate钩子会在数据更新之前执行,但在重新渲染之前。
11. 子组件的updated钩子会在数据更新之后,且重新渲染之后执行。
12. 父组件的updated钩子会在数据更新之后,且重新渲染之后执行。
13. 父组件的beforeUnmount钩子会在子组件卸载之前执行。
14. 子组件的beforeUnmount钩子会在子组件卸载之前执行。
15. 子组件的unmounted钩子会在子组件卸载之后执行。
16. 父组件的unmounted钩子会在子组件卸载之后执行。
需要注意的是,Vue 3中的beforeDestroy和destroyed钩子已经被beforeUnmount和unmounted钩子取代。
相关问题
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 钩子函数中,是无法访问子组件的实例的。
vue 的父组件和子组件生命周期钩子函数执行顺序?
Vue的父组件和子组件生命周期钩子函数执行顺序是先执行父组件的钩子函数,再执行子组件的钩子函数。具体来说,父组件的beforeCreate、created、beforeMount钩子函数会在子组件的beforeCreate、created钩子函数之前执行,而父组件的mounted钩子函数会在子组件的mounted钩子函数之后执行。在更新过程中,父组件的beforeUpdate、updated钩子函数也会在子组件的beforeUpdate、updated钩子函数之前执行。最后,父组件的destroyed钩子函数会在子组件的destroyed钩子函数之后执行。
阅读全文