Vue动态组件以及keep-alive

        概念

        使用方式

---

1.概念：

动态组件是Vue3中非常重要的一个组件类型，它可以让我们在不同的场景下灵活地渲染不同的组件，动态组件是指在一个挂载点使用多个组件，并进行动态切换，我们可以简单的理解为页面的一个位置，最常见的使用场景就是：tab的切换功能

在vue要实现这个功能通常使用<component>元素的 is 的特性

2.使用方式：

<template>
  <div class="hello">
    <h3>使用component 的 is特性</h3>
    <ul>
      <li 
      v-for="(item,index) in tabList" 
      :key="index" 
      style="cursor:pointer" 
      @click="changeView(index)">
      {{item}}</li>
    </ul>
    <component :is="currentView"></component>
  </div>
</template>

<script setup>
import shouji from "./shouji";
import pc from "./pc";
import shuma from "./shuma";

let index = 0;
let arr = ["shuma", "shouji", "pc"];
let tabList = ["数码", "手机", "电脑"];
const currentView = () => {
  return arr[this.index];
}

const changeView = (idx) => {
  index = idx;
}
</script>

3.keep-alive

上述讲到的方法虽然能够实现了动态组件的切换，但是每次切换都会把上一个组件销毁，然后渲染下一个组件，对于多次切换而言，显然每次的销毁和重新渲染，很大消耗了我们的性能。所以我们可以通过keep-alive对组件进行缓存，对于不显示的组件不是去销毁他，而是使他处理不激活的状态，当需要显示时再去激活

keep-alive的两个属性：

include和exclude

include表示只能允许匹配到的组件生效
exclude则相反，除了匹配到的组件之外有效

和keep-alive 相关的两个生命周期

activated() {
    console.log("shouji 手机页面被添加");// 被缓存的组件激活时触发
},
deactivated() {
    console.log("shouji 手机页面被移除"); // 被切换到其他组件时触发
}