除了路由的组件控制，我们还需要通常的动态修改组件使用的技术，于是有了动态组件。

动态组件

vue提供了<slot>、<template>外，还为动态组件设计了标签<component>。

<component :is="name"></component>
//等效于name子组件标签
<name></name>

上面的代码属于官方的规范写法，:is="name"用于动态决定加载的组件，name应该与component中子组件名字一致从而生效。

• 我们具体实现三个按钮在三个组件之间切换：

    <button @click="compName('Comp1')">1</button>
    <button @click="compName('Comp2')">2</button>
    <button @click="compName('Comp3')">3</button>

  data() {
    return {
      name: "Comp1",
    };
  },
  components: {//这里使用了异步组件引入的写法与promise相关。
    Comp1: () => import("./Comp1.vue"),
    Comp2: () => import("./Comp2.vue"),
    Comp3: () => import("./Comp3.vue"),
  },
......
//methods方法
    compName(msg) {
      this.name = msg;
    },

动态的组件的出现帮助我们切换组件，但是由此产生了保留组件状态的需求，我们想要input等功能组件在切换组件时一直保留数据。

keep-alive组件缓存

通过<keep-alive>我们可以使内部的动态组件保留状态，而不会在切换前后重新生成组件或销毁。

    <button @click="compName('Comp1')">1</button>
    <button @click="compName('Comp2')">2</button>
    <button @click="compName('Comp3')">3</button>
    <keep-alive>
      <component :is="name"></component>
    </keep-alive>

如果留意一下就会发现在我们首次加载组件时会闪烁一下，这是从0创建组件并渲染到页面上的效果，但是使用了<keep-alive>缓存后我们发现每个组件只会闪烁一次，然后就可以平滑的切换，因为这个时候组件不会再从0开始创建，而是从缓存中拿出保留状态的组件。

activated和deactivated钩子

作为生命周期函数之一，activated用于渲染时触发，用于动态组件切换使用，deactivated则是相反，而且都必须是keep-alive树内的component切换才会触发。

<template>
  <div id="Comp1">
    <p>Comp1</p>
  </div>
</template>
<script>
export default {
//加载组件时触发
  activated() {
    console.log('111')
  },
//切成其他组件时触发
  deactivated() {
    console.log("1dea")
  },
}
</script>

activated和deactivated钩子和八大生命周期函数钩子是同等级的。

动态组件（缓存）与路由对比

当同时学习了动态组件（缓存）与路由后，你会发现功能是相似的，但是仍然有较大的差异，选择也依据不同的场景和需求：

• 动态组件的特点是缓存状态，所以较小组件间的切换并且有状态缓存的需求时我们选择动态组件，从而优化性能，而路由更多使用在强调页面和功能模块切换场景。

• 动态组件不会修改URL。

• 路由的数据的耦合性很低，便于开发。