Vue中mounted钩子函数触发时机

Question

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

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

父组件recommend.vue如下：

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

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

Answer 1

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

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

js 宏任务和微任务 - 栴檀 - 博客园 js 宏任务和微任务 .宏任务（macrotask ）和微任务（microtask ） macrotask 和 microtask 表示异步任务的两种分类。 在挂起任务时，JS 引 https://www.cnblogs.com/ckAng/p/11133643.html

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