vue动态组件和keep-alive的使用

---

前言

使用场景
想要实现点击button按钮实现tab栏切换页面效果时，可以通过如下两种方式：
第一个是使用v-if/v-show进行判断:这样过于麻烦
第二个使用动态组件进行切换

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、动态组件是什么？

• Vue 提供的一个内置的 <Component> 组件,专门用来实现动态组件的渲染
• 多个组件使用同一个挂载点，并可以动态切换，这就是动态组件

二、代码实现

<template>
  <div class="about">
    <h1>我是---------About--------</h1>
    <div style="width: 50%; margin: 0 auto">
    // 在 is 中写入注册的组件名称,写入是字符串类型
    <component is="Give"></component>
   	// 写法二:动态绑定 is 属性通过变量修改动态组件
   	 <component :is="isShow"></component>
    </div>
  </div>
</template>
<script>
import Father from "../components/father/index.vue";
import Give from "../components/A/index.vue";
import Accept from "../components/B/index.vue";
export default {
  components: {
    Father,
    Give,
    Accept,
  },
  data() {
    return {
      isShow:"Give"
    }
  },
};
</script>

二、keep-alive 是什么?

• Vue内置的keep-alive组件, 可以让包裹的组件保存在内存中不被销毁。
• 动态组件或页面频繁切换会导致组件被频繁销毁和重新创建
• 会影响性能,使用 keep-alive 保存组件状态

keep-alive的生命周期

• deactivated和actived
• 当被keep-alive包裹的组件进行路由切换时,组件从显示到隐藏会执行deactivated
• 当被 keep-alive包裹的组件进行路由切换时,组件从隐藏到显示会执行actived
• 被keep-alive 包裹的组件不会被销毁和重复创建,这两个钩子可以做到代替mounted()和destoryed()的效果

代码实现

// 使用 keep-alive 保存组件状态
<keep-alive>
   <component :is="comName"></component>
</keep-alive>