vue2 - 生命周期执行顺序?

Question

vue2那些情况会导致父组件的mounted比子组件的mounted先执行

回复

Answer 1

异步组件、动态组件或者条件渲染都可能会导致父组件的mounted先于子组件执行。

Answer 2

比如说异步请求的数据去渲染子组件的场合下，父组件就会先 mounted 然后子组件 mounted。

如果 vNodes 已经确定好了的情况下，就是子组件 mounted 然后父级组件 mounted

Answer 3

Vue 2 的组件生命周期执行顺序通常遵循以下规则：

1. 父组件的 beforeCreate
2. 父组件的 created
3. 子组件的 beforeCreate
4. 子组件的 created
5. 子组件的 beforeMount
6. 子组件的 mounted
7. 父组件的 beforeMount
8. 父组件的 mounted

因此，按照正常的组件挂载流程，父组件的 mounted 钩子应当在所有子组件的 mounted 钩子之后执行。

然而，有几种情况可能导致父组件的 mounted 钩子比子组件的 mounted 钩子先执行：

1. 异步组件：如果子组件是异步加载的，那么父组件的 mounted 钩子可能会在子组件实际挂载之前执行。异步组件是通过 Vue.component('async-example', function (resolve, reject) { ... }) 或在路由配置中通过 component: () => import('./MyComponent.vue') 来定义的。
2. 条件渲染：如果子组件的渲染是基于某个条件（如 v-if），并且这个条件在父组件的 mounted 钩子执行时尚未满足，那么子组件的 mounted 钩子当然也会延迟执行。
3. 手动挂载：如果你使用 vm.$mount() 方法手动挂载一个组件，并且没有正确地等待子组件挂载完成，也可能导致这种情况。
4. 错误或异常：在子组件的 mounted 钩子中发生错误或异常，并且没有妥善处理，可能会导致子组件的挂载过程中断，从而使父组件的 mounted 钩子先于子组件执行。

请注意，这些异常情况并不是正常的组件使用方式，应当尽量避免。在正常的组件设计和使用中，父组件的 mounted 钩子应该总是在所有子组件的 mounted 钩子之后执行。