Vue 在生命周期的什么阶段,所有子组件都被挂载完毕?

问题:最近在重构代码是被一个问题困惑了两天,那就是Vue在生命周期的什么阶段,所有子组件都会被挂载完毕?

背景:场景是这样的,我将页面的header部分使用component独立了出来,并在header中具有用标签加载背景图,背景图比较大,由于图片是根据路由不同,动态从config文件加载的,所以header的高度也是动态变化的,于是我就想获取header的高度。

具体情况:
我的第一直觉是在生命周期的某个阶段来使用ref或DOM来获取这个高度的值,于是我开始使用尝试在mounted中获取height,得到的结果是18,实际应该是78(在盒模型看到的),文档提到mounted阶段“不会承诺所有子组件也都一起被挂载”,我觉得应该是我的图片比较大,导致了munted执行header还没有渲染完成导致的,文档推荐的nexttick我也试了,也不行。

问题:
到底应该怎么在页面加载之初就自动获取header的高度属性的?也就是在什么地方,能够确定所有组件都挂载完了?

我使用setTimeout延迟执行获取高度,500毫秒(没有去尝试更小的值),就可以获取正确的值了,也就是问题其实已经解决了,主要是探讨下,有没有更正规的形式。

是不是可以给你的header绑定一个监听高度的方法,当高度变化时,执行你想要的代码

感觉也是一种解决方式,但是觉得和setTimeout一样都属于替代方案,因为我碰到的问题比较简单,仅仅是一个header组件,如果页面具有大量的组件的话,每个都绑定一个监听感觉不是很“清真”:joy:,就是想知道有没有一个类似生命周期钩子的东西,能够在一个地方明确,虽有子组件,均已挂载完毕,在那里统一操作。

看了一下,你之前用的nexttick没用,试过$nexttick了吗?

你在子组件的mounted钩子函数里执行一个函数,然后去触发父组件的某个函数去获取header的高度,不是很确定这样行不行,仅供参考:grinning:

image

这样试一下,在这个方法里 调用 ref 获取高度

您好,我遇到了和您一样的问题,请问您现在有更好的办法代替settimeout 吗

可以用监听图片渲染完成之后,$emit试试??

有一种猜想,是否可以根据父子组件加载顺序不同来实现此需求。

@hook:mounted

挂载完毕和渲染完毕,并不一样。

mounted 是挂载完毕,不一定渲染完毕。
可以参考一下延迟加载图片的方法吧,大概是监听 img 的完成的事件。

其实用settimeout 挺方便的。