Vue组件：动态组件、缓存组件、异步组件

1、动态组件

Vue.js 提供了对动态组件的支持。在使用动态组件时，多个组件使用同一挂载点，根据条件在不同组件之间进行动态切换。动态组件通过使用 Vue.js 中的 <component>元素，动态绑定到该元素的 is 属性，根据 is 属性的值来判断使用哪个组件。

语法格式如下：

<!-- 动态组件 -->
<component :is="componentName"></component>

动态组件经常应用在路由控制或选项卡切换中。下面通过一个切换选项卡的实例来说明动态组件的基本用法。

【实例】动态组件的基本用法。

（1）创建 ComponentA.vue 组件

<template>
    <fieldset>
        <legend>组件A</legend>
        <p>博客信息：{{ blogName }}</p>
        <p>博客地址：{{ blogUrl }}</p>
    </fieldset>
</template>

<script>
export default {
    data() {
        return {
            blogName: '您好，欢迎访问 pan_junbiao的博客',
            blogUrl: 'https://blog.csdn.net/pan_junbiao'
        }
    }
}
</script>

（2）创建 ComponentB.vue 组件

<template>
    <fieldset>
        <legend>组件B</legend>
        <p>用户名称：<input type="text" v-model="userModel.userName" /></p>
        <p>用户年龄：<input type="number" v-model="userModel.age" /></p>
        <p>用户性别：<input id="male" type="radio" value="1" v-model="userModel.sex" />
            <label for="male">男</label>
            <input id="female" type="radio" value="2" v-model="userModel.sex" />
            <label for="female">女</label>
        </p>
        <button @click="loadData">加载数据</button>
    </fieldset>
</template>

<script>
export default {
    data() {
        return {
            userModel: {
                userName: '',
                age: 0,
                sex: 2
            }
        }
    },
    methods: {
        loadData: function () {
            this.userModel.userName = 'pan_junbiao的博客';
            this.userModel.age = 36;
            this.userModel.sex = 1;
        }
    }
}
</script>

<style scoped>
.b_text {
    width: 300px;
    padding: 3px;
    font-size: 16px;
}
</style>

（3）在 App.vue 根组件中引入两个组件，并实现切换功能

<template>
  <button :disabled="active" @click="trigger('ComponentA')">组件 A</button>
  <button :disabled="!active" @click="trigger('ComponentB')">组件 B</button>
  <!-- 第三步：使用动态组件 -->
  <component :is="componentName"></component>
</template>

<script>
//第一步：引用组件
import ComponentA from '@/components/ComponentA.vue';
import ComponentB from '@/components/ComponentB.vue';

export default {
  data() {
    return {
      componentName: 'ComponentA',
      active: true
    }
  },
  //第二步：注册组件
  components: {
    ComponentA,
    ComponentB
  },
  methods: {
    //切换组件
    trigger: function (componentName) {
      this.componentName = componentName;
      this.active = !this.active;
    }
  }
}
</script>

<style>
button {
  font-size: 16px;
  padding: 5px 20px;
  margin: 0px 10px 10px 0px;
}
</style>

执行结果：

（1）切换组件A效果：

（2）切换组件B效果：

2、缓存组件

在多个组件之间进行切换的时候，有时需要保持这些组件的状态，将切换后的状态保留在内存中，以避免重复渲染。为了解决这个问题，可以用一个 <keep-alive> 元素将动态组件包含起来。

语法格式如下：

<!-- 缓存组件 -->
<keep-alive>
	<component :is="componentName"></component>
</keep-alive>

【实例】实现选项卡内容的缓存效果。

修改 App.vue 根组件中引入两个组件，并使用  <keep-alive> 元素实现组件内容的缓存效果。

<template>
  <button :disabled="active" @click="trigger('ComponentA')">组件 A</button>
  <button :disabled="!active" @click="trigger('ComponentB')">组件 B</button>
  <!-- 第三步：使用缓存组件 -->
  <keep-alive>
    <component :is="componentName"></component>
  </keep-alive>
</template>

执行结果：

3、异步组件

异步组件是Vue.js中的另一个重要特性，它允许你定义一个组件，但不是立即加载它，而是在需要时才加载。这种机制对于构建大型应用程序尤其有用，因为它可以帮助减少应用程序的初始加载时间，提高性能。异步组件通过动态导入模块来实现，这使得组件的加载成为异步操作。

语法格式如下：

// 第一步：导入 defineAsyncComponent 函数
import { defineAsyncComponent } from 'vue'

// 第二步：定义异步组件
const ComponentB = defineAsyncComponent(() => import('@/components/ComponentB.vue'));

【实例】使用异步组件。

修改 App.vue 根组件中引入两个组件，其中组件B使用异步组件。

<template>
  <button :disabled="active" @click="trigger('ComponentA')">组件 A</button>
  <button :disabled="!active" @click="trigger('ComponentB')">组件 B</button>
  <!-- 第三步：使用缓存组件 -->
  <keep-alive>
    <component :is="componentName"></component>
  </keep-alive>
</template>

<script>
// 导入 defineAsyncComponent 函数
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 {
      componentName: 'ComponentA',
      active: true
    }
  },
  //第二步：注册组件
  components: {
    ComponentA,
    ComponentB
  },
  methods: {
    //切换组件
    trigger: function (componentName) {
      this.componentName = componentName;
      this.active = !this.active;
    }
  }
}
</script>

<style>
button {
  font-size: 16px;
  padding: 5px 20px;
  margin: 0px 10px 10px 0px;
}
</style>