『VUE』34. 异步组件（详细图文注释）

---

欢迎关注 『VUE』 专栏，持续更新中
欢迎关注 『VUE』 专栏，持续更新中

加载速度的优化

实际项目中你可能会有几十个组件,如果一开始就加载了全部组件(哪怕其中有些组件你暂时用不到)这无疑大大增加了响应时间,用户体验很差.
我们这里就直接加载了componentA和B,但是实际上如果不点击切换组件,我们暂时用不到B.

与前面的同步相对的就是异步,你加载当前需要用的个别组件,分步骤而不是同一步骤加载所有组件.

---

示例代码

注意异步引用的方式import { defineAsyncComponent } from "vue";然后const ComponentB = defineAsyncComponent(() => import("./components/ComponentB.vue") );

<script>
import { defineAsyncComponent } from "vue";
import ComponentA from "./components/ComponentA.vue";
//import ComponentB from "./components/ComponentB.vue";
const ComponentB = defineAsyncComponent(() =>
  import("./components/ComponentB.vue")
);
</script>

App.vue

<template>
  <KeepAlive>
    <component :is="choseComponent"></component>
  </KeepAlive>

  <button @click="changeComponent">切换组件</button>
</template>

<script>
import { defineAsyncComponent } from "vue";
import ComponentA from "./components/ComponentA.vue";
//import ComponentB from "./components/ComponentB.vue";
const ComponentB = defineAsyncComponent(() =>
  import("./components/ComponentB.vue")
);

export default {
  data() {
    return {
      choseComponent: "ComponentA",
    };
  },
  components: {
    ComponentA,
    ComponentB,
  },
  methods: {
    changeComponent() {
      console.log(this.choseComponent);
      this.choseComponent =
        this.choseComponent == "ComponentA" ? "ComponentB" : "ComponentA";
    },
  },
};
</script>

网页刚刚加载时只有A的加载没有B

只有在组件切换到B时才加载了B

---

总结

大家喜欢的话，给个👍，点个关注！给大家分享更多计算机专业学生的求学之路！

版权声明：

发现你走远了@mzh原创作品，转载必须标注原文链接

Copyright 2024 mzh

Crated：2024-3-1

欢迎关注 『VUE』 专栏，持续更新中
欢迎关注 『VUE』 专栏，持续更新中
『未完待续』

---