vue components 异步与同步加载的使用区别

vue components 异步与同步加载的使用区别

• home1组件

<template>
<div >
    home1
    </div>
</template>
<script>
    export default {
        name:"home1",
        methods: {
            test() {
                console.log("home1");
            },
        },
    };
</script>

• home2组件

<template>
<div >
    home2
    </div>
</template>
<script>
    export default {
        name:"home2",
        methods: {
            test() {
                console.log("home2");
            },
        },
    };
</script>

同步

<template>
<div id="app">
    <component :is="com" ref="com" />
    <button @click="onSwitch">切换组件</button>
    </div>
</template>
<script>
    import Home1 from "./views/Home1.vue";
    import Home2 from "./views/Home2.vue";
    export default {
        components: {
            Home1,
            Home2,
        },
        data() {
            return {
                com: "home1",
            };
        },
        methods: {
            onSwitch() {
                // 点击切换组件
                this.com = this.com === "home1" ? "home2" : "home1";
                // 组件渲染后打印组件函数
                this.$nextTick(() => {
                    this.$refs.com.test()
                    // home2
                    // home1
                });
            },
        },
        mounted() {},
    };
</script>

异步

<template>
<div id="app">
    <component :is="com" ref="com" />
    <button @click="onSwitch">切换组件</button>
    </div>
</template>
<script>
    export default {
        components: {
            Home1: () => import("./views/Home1.vue"),
            Home2: () => import("./views/Home2.vue"),
        },
        data() {
            return {
                com: "home1",
            };
        },
        methods: {
            onSwitch() {
                // 点击切换组件
                this.com = this.com === "home1" ? "home2" : "home1";
                // 组件渲染后打印组件函数
                this.$nextTick(() => {
                    this.$refs.com.test()
                    // test is undefined(第一次没获取，报错)
                    // home1
                    // home2
                });
            },
        },
        mounted() {},
    };
</script>

区别

使用	异步	同步
加载	使用时加载（可能慢几毫秒显示，但能提升page的显示速度）	同page界面加载
获取组件	$nextTick之后也不能获取（但加载一次后就会被缓存）	$nextTick之后立即获取
…