问题背景:
子组件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能保证子组件获取到值并进行样式设置,但是如果手动延迟数据的获取的话又失效了?
加载时有数据显示完数据后再执行mounted(主线程),由于sliders异步加载(setTimeout,ajax之类的是宏任务,在最后执行的),没有数据,此时sliders为[],没有生成节点,所以mounted中的div.children.length为0
加v-if是是有数据后再加载组件,mounted触发时数据已经存生成子节点。如果题主改为v-show也是无法获取到子节点)
有帮助或启发麻烦点个采纳【本回答右上角】,谢谢~~
微任务,宏任务参考
只要你的数据是来自异步请求的,那么这个数据就是在mouted之后页面生成之后才拿的到,因为要先完成created和mouted中的同步任务,才轮得到异步任务执行,如果一定要先拿异步数据,可以用asnyc await去等待某一个异步请求