Vue动态组件

components简介

在不同组件之间进行动态切换
Vue的元素加一个特殊的【is】属性来实现
多个组件使用同一个挂载点，之后动态在各个组件之间切换

内置组件keep-alive

keep-alive 动态组件默认每次切换都会销毁组件并重新创建，这样会影像性能
使用keep-alive组件缓存非活动组件，可以保留状态，避免重新渲染

<!-- 使用keep-alive组件缓存非活动组件，可以保留状态，避免重新渲染，默认每次切换都会销毁然后重新创建 --> 
<keep-alive>
  <component :is='flag'></component>
</keep-alive>

使用案例 https://zhuanlan.zhihu.com/p/451433950

什么是动态组件？

组件是可复用的Vue实例，组件也是Vue实例
但组件和Vue实例存在差别：

1. 组件没有挂在目标el
2. 组件是跟随Vue实例的，所有的Vue实例的挂载点也是组件的挂载点
3. 组件中data不能是对象，因为Vue实例是单例模式，只有一个
   组件有多个，多个属性调用对象会指向同一地址，但是方法每new一个实例
   就会开辟一块新的内存空间

所以组件中的data不能是对象，必须是方法 ★★★

动态组件就是动态变化的组件和动态样式一样
动态样式绑定 -> [:style]
动态组件绑定 -> [:is]

动态组件的具体实现

<template>
  <div style="display: flex">
    <div v-for="(item, index) in data" :key="index"
         @click="switchCom(item, index)"
         :class="[active === index ? 'active' : '']"
         class="tabs"
    >
      <div>{{item.name}}</div>
    </div>
    <component :is="comId"></component>
  </div>
</template>


<script setup>
import {ref, reactive, shallowRef, markRaw} from "vue";

import ACom from './components/A.vue'
import BCom from './components/B.vue'
import CCom from './components/C.vue'

const comId = shallowRef(ACom)
const active = ref(0)

const switchCom = (item, index) => {
  comId.value = item.com
  active.value = index
}

// markRaw：作用：标记一个对象，使其永远不会再成为响应式对象。
const data = reactive([
  {
    name: 'A',
    com: markRaw(ACom)
  },
  {
    name: 'B',
    com: markRaw(BCom)
  },
  {
    name: 'C',
    com: markRaw(CCom)
  }
])
</script>


<style lang="scss">
.active {
  background: blueviolet;
}

.tabs {
  border: 1px solid #ccc;
  padding: 5px 10px;
  margin: 5px;
  cursor: pointer;
}
</style>