【vue】动态组件、异步组件的理解及使用场景

---

一、动态组件的使用

动态组件，顾名思义，可以让组件根据需求动态显示，一般用于需要根据数据动态渲染的场景或类似tab切换栏，即组件类型不确定。使用起来也特别简单，示例代码如下：

<template>
  <div>
    <button @click="changeComponent">showComponents</button>

    <!-- 只需要给component标签动态绑定一个is属性，组件会在currentTabComponent改变时改变 -->
    <component :is="currentTabComponent"></component>
  </div>
</template>

<script>
import Compontent1 from "./component1.vue";
import Compontent2 from "./component2.vue";
export default {
  components: {
    Compontent1,
    Compontent2,
  },
  data() {
    return {
      currentTabComponent: "Compontent1", // 默认显示组件1
    };
  },

  methods: {
    changeComponent() {
      this.currentTabComponent = "Compontent2";
    },
  },
};
</script>

<style></style>

二、异步组件的使用

可以先想象这样一个场景：你引入了一个子组件，子组件叫demo，但这个demo特别大，页面每次渲染的时候都会同步加载这个demo，这样导致你页面特别卡，那有没有一种方法，可以让我在需要的时候才加载这个demo呢？这就是异步组件的作用，可以按需加载组件。示例代码如下：

<template>
  <div>
    <button @click="showComponent">showComponents</button>

    <div v-if="flag">
      <Demo />
    </div>
  </div>
</template>

<script>
/** 如果用import方法引入，那么就是同步加载组件，组件会在页面加载时候同步加载
import Demo from "./demo.vue"; */
export default {
  components: {
    /** 使用异步加载组件，只有当需要显示这个组件的时候，
    才会去加载，这样可以避免页面加载的时候去同步加载，大大提高页面渲染速度 */
    Demo: () => import("./demo.vue"),
  },
  data() {
    return {
      flag: false,
    };
  },

  methods: {
    showComponent() {
      this.flag = true;
    },
  },
};
</script>

<style></style>

总结

动态组件和异步组件在特定场景下都特别好用，单异步组件相对动态组件来说稍微有一丢丢难理解，大家需要仔细体会~