vue3 能不能监控到页面以及组件中的所有数据全部加载完成？

Question

Component1.vue

<template>
    <H1>Component1</H1>
    <Component3/>
</template>

<script>
import Component3 from './Component3.vue'
import axios from "axios";
import {onMounted} from "vue";

export default {
    name: "Component1",
    components: {Component3},
    setup() {

        const apiData1 = () => {
            return new Promise(function (resolve) {
                axios.get("/component1/data1").then(() => {
                    resolve(true);
                });
            });
        };

        const apiData2 = () => {
            return new Promise(function (resolve) {
                axios.get("/component1/data2").then(() => {
                    resolve(true);
                });
            });
        };

        onMounted(() => {

            Promise.all([apiData1(), apiData2()]).then(() => {
                console.log('Component1 完成')
            })

        })

        return {}
    }
}
</script>

<style scoped>

</style>

Component2.vue

<template>
    <H1>Component2</H1>
</template>

<script>
import axios from "axios";
import {onMounted} from "vue";

export default {
    name: "Component2",
    setup() {

        const apiData1 = () => {
            return new Promise(function (resolve) {
                axios.get("/component2/data1").then(() => {
                    resolve(true);
                });
            });
        };

        const apiData2 = () => {
            return new Promise(function (resolve) {
                axios.get("/component2/data2").then(() => {
                    resolve(true);
                });
            });
        };

        onMounted(() => {

            Promise.all([apiData1(), apiData2()]).then(() => {
                console.log('Component2 完成')
            })

        })

        return {}
    }
}
</script>

<style scoped>

</style>

Component3.vue

<template>
    <H1>Component3</H1>
</template>

<script>
import axios from "axios";
import {onMounted} from "vue";

export default {
    name: "Component3",
    setup() {

        const apiData1 = () => {
            return new Promise(function (resolve) {
                axios.get("/component3/data1").then(() => {
                    resolve(true);
                });
            });
        };

        const apiData2 = () => {
            return new Promise(function (resolve) {
                axios.get("/component3/data2").then(() => {
                    resolve(true);
                });
            });
        };

        onMounted(() => {

            Promise.all([apiData1(), apiData2()]).then(() => {
                console.log('Component3 完成')
            })

        })

        return {}
    }
}
</script>

<style scoped>

</style>

HomeView.vue

<template>
    <Component1/>
    <Component2/>
</template>

<script>
import Component1 from '@/components/Component1.vue'
import Component2 from '@/components/Component2.vue'
import {onMounted} from "vue";

export default {
    name: "HomeView.vue",
    components: {Component1, Component2},
    setup() {

        onMounted(() => {

            // 当访问 首页的时候，怎么知道 Component1、Component2、Component3... 等所有组件数据已经加载完成，还要考虑组件中的组件，能不能做到？

        })

        return {}
    }
}
</script>

<style scoped>

</style>

当访问 首页 HomeView 的时候，怎么知道 Component1、Component2、Component3 ... 等所有组件数据已经加载完成，还要考虑组件中的组件 Component3，能不能做到？

Answer 1

可以考虑使用父组件 provide 暴露一个方法，子组件 inject 引入后去注册，注册时候注册数量+1，完成的时候完成数量+1。每次完成数量改变的时候去校验一下是否已经全部完成。

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。