vue中 component 懒加载适用场景

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 4 天，点击查看活动详情

首先我们创建两个不同的组件(以下拿vue2举例)

• 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>
// 加载组件时，就已经引入了Home1与Home2
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()
            });
        },
    },
    mounted() {},
};
</script>

这里模拟切换两次，分别打印：

home2

home1

没造成影响。

懒加载方式

<template>
<div id="app">
    <component :is="com" ref="com" />
    <button @click="onSwitch">切换组件</button>
</div>
</template>
<script>
export default {
//  加载组件时，会异步加载Home1与Home2
    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()
            });
        },
    },
    mounted() {},
};
</script>

这里模拟切换三次，分别打印：

报错：test is undefined

home1

home2

很显然造成影响，该组件加载成功后，但懒加载的home1或home2不一定加载成功。

总结

• 同步加载方式优势

使用同步加载的方式，可以保证组件能够在页面初始化的时候就加载完毕，因此你在点击不同按钮时可以调用不同的组件来执行相应的函数而不会报错或者导致组件渲染不准确。

• 懒加载方式优势

懒加载的方式可以很好的减少首次加载网页的时间，减轻网页的负担，有助于提高用户的使用体验。

两种方式各有所优，可以根据自己的业务场景选择，不要无脑全使用懒加载方式，希望能帮助到您们。