Vue中mounted钩子函数触发时机

问题背景:
子组件test.vue如下:

img

子组件中,在mounted钩子函数中对slot中接收到的dom设置width和height

父组件recommend.vue如下:

img

sliders是通过异步获取到的数据

如果在父组件中不加上v-if=“sliders.length > 0”这个条件,则子组件中没法对接收到的dom进行设置宽高,个人理解是因为异步获取数据的延迟,在还没获取到数据时,子组件已经调用mounted钩子函数了。于是加上了一个v-if条件,便可以实现所想效果,但是有个疑问,子组件mounted是不是都会等到v-if条件实现后才调用mounted钩子函数,给sliders的赋值添加上一个setTimeout,设置在6s后才获取到值,结果是mounted钩子函数调用了,但是mounted钩子函数中的样式设置没有实现,所以提问一下,Vue中mounted钩子函数的触发时机到底是什么时候,为什么添加上了一个v-if能保证子组件获取到值并进行样式设置,但是如果手动延迟数据的获取的话又失效了?

加载时有数据显示完数据后再执行mounted(主线程),由于sliders异步加载(setTimeout,ajax之类的是宏任务,在最后执行的),没有数据,此时sliders为[],没有生成节点,所以mounted中的div.children.length为0
v-if是是有数据后再加载组件,mounted触发时数据已经存生成子节点。如果题主改为v-show也是无法获取到子节点)

有帮助或启发麻烦点个采纳【本回答右上角】,谢谢~~
微任务,宏任务参考


JS 事件循环 mutate为什么打印在两个promise之间?-前端-CSDN问答 CSDN问答为您找到JS 事件循环 mutate为什么打印在两个promise之间?相关问题答案,如果想了解更多关于JS 事件循环 mutate为什么打印在两个promise之间? javascript、有问必答 技术问题等相关问答,请访问CSDN问答。 https://ask.csdn.net/questions/7515380

只要你的数据是来自异步请求的,那么这个数据就是在mouted之后页面生成之后才拿的到,因为要先完成created和mouted中的同步任务,才轮得到异步任务执行,如果一定要先拿异步数据,可以用asnyc await去等待某一个异步请求