vue是否可以控制子组件的加载顺序

Question

父组件加载了多个子组件（比如a、b、c、d、e、f、g七个子组件），要实现的效果是：在页面初始化的时候7个子组件全部加载，然后有两个条件（条件1、条件2），当满足条件1的时候，页面按顺序渲染，就正常写就行了，如图

当满足条件2的时候，定位到子组件f的位置，效果如图所示

目前的思路是等a、b、c、d、e组件加载完毕之后获取到这5个组件的高度，根据高度设置滚动条的scrollTop实现定位到f子组件的位置, 这么写虽然实现了功能，但是体验不佳，因为其他子组件的高度是不确定的，所以要等其他组件渲染完成后才能拿到scrollTop,这样就会感觉加载很慢，有没有一种方法可以先加载渲染f、g子组件，加载完成之后再加载其他的子组件呢，同时能实现定位的功能，或者有什么想法也可交流一下，非常感谢

Answer 1

你这么做理论上也能实现。就是用v-if控制先渲染f和g，然后一起渲染其他组件。但是有个问题，就是每一个组件渲染完成后你的位置都会出现偏移，所以你最好用v-show控制其他三个组件的显示时机，当三个组件都渲染完成你再一起显示，这样只要最后滚动一次就可以了。举个例子

<template>
    <template v-if="abcRender">
        <a v-show="allRendered" @render-finish="renderFinish/>
        <b v-show="allRendered" @render-finish="renderFinish/>
        <c v-show="allRendered" @render-finish="renderFinish/>
    <template>
    <e id="E" @render-finish="renderFinish"/>
    <f @render-finish="renderFinish"/>
</template>
<script setup>
const renderFinishArr = ref([])
const renderFinish = () => {
    renderFinishArr.value.push('')
}
const abcStartRender = computed(() => renderFinishArr.value.length === 2) // abc组件延迟渲染
const allRendered = computed(() => renderFinishArr.value.length === 5)
watch(
    () => allRendered.value,
    (newVal) => {
        if (newVal === 5) E.scrollIntoView()
    }
)
</script>