关于vue3动态组件的使用

在做项目的过程中遇到卡片切换页面的情况，由于要做权限管理，卡片的页面内容就使用了动态组件，这样的话就可以结合后端通过角色判断返回组件数组前端渲染就解决了系统权限问题。

• keep-alive是 vue 的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM,所写的项目中卡片切换平凡，防止dom重复渲染消耗性能。
  keep-alive有一些属性:

include	只有名称匹配的组件会被缓存 （支持字符串或正则表达）
exclude	任何名称匹配的组件都不会被缓存（支持字符串或正则表达）
max	最多可以缓存多少组件实例，一旦达 到这个数字，那么缓存组件中最近没有被访问的实例会被销毁

          <!-- 缓存组件 -->
          <keep-alive>
           <!-- 动态组件 -->
            <component
              :is="components.get(activeKey)"
            />
          </keep-alive>

• 引入defineAsyncComponent，markRaw
  defineAsyncComponent() 方法定义一个异步组件，它在运行时是懒加载的。参数可以是一个加载函数，或是对加载行为有更进一步控制的一个选项对象。
  实际使用中使用ref的话会报错提示造成不必要的性能消耗， reactive 会进行proxy 代理 而我们组件代理之后并无用处，为了节省性能开销，vue提示推荐我们使用shallowRef 或者 markRaw 跳过proxy 代理，文中代码使用了markRaw

 import { defineAsyncComponent, markRaw } from 'vue';
 const components = markRaw(new Map<string, any>());
  //组件1
  components.set(
    'index1',
    defineAsyncComponent(() => import('./components/table/index1.vue')),
  );
  //组件2
  components.set(
    'index12',
    defineAsyncComponent(() => import('./components/table/index2.vue')),
  );
  //后端返回数据
  const carBarList = ref([
    {
      name: '组件1',
      sign: 'index1',
      icon: 'icon-icon-hengxiangshijianzhou',
    },
    {
      name: '组件2',
      sign: 'index2',
      icon: 'icon-wj-jdws',
    },
  ]);
  //组件切换标识
   const activeKey = ref('');
  //组件选择
  function tabSelect(item: { sign: string }) {
    activeKey.value = item.sign;
  }

• 组件内的生命周期

//keep-alive钩子函数：组件被激活时调用
  activated() {
    console.log('组件被激活');
  },
  //keep-alive钩子函数：组件消失，被缓存时调用
  deactivated() {
    console.log('组件被缓存');
  },