Vue3+TypeScript学习笔记（十）

1. 动态组件基本语法>，组件实例通过import导入
2. 可以在reactive内部使用markRaw()函数（不生成proxy对象）和将ref改为shallowRef来优化性能

<template>
    <div class="guide">
        <div
            @click="change(index)"
            :class="[active == index ? 'active' : '']"
            v-for="(item, index) in data"
        >
            {{ item.name }}
        </div>
    </div>
    <div class="text">
        <component :is="comId"></component>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, markRaw, shallowRef } from 'vue'
import A from './components/A.vue'
import B from './components/B.vue'
import C from './components/C.vue'
const comId = shallowRef(A)
const active = shallowRef(0)
const data = reactive([
    {
        name: '组件A',
        com: markRaw(A),
    },
    {
        name: '组件B',
        com: markRaw(B),
    },
    {
        name: '组件C',
        com: markRaw(C),
    },
])
const change = (index: any) => {
    active.value = index
    comId.value = data[index].com
}
</script>

<style scoped lang="less">
.guide {
    display: flex;
    div {
        margin: 5px 0 0 20px;
        padding: 5px 10px;
        border: 1px solid black;
    }
}
.active {
    background: skyblue;
}
.text {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 200px;
    margin: 20px 0 0 0;
    border: 1px solid black;
}
</style>

<template>
    <div>只因你太美</div>
</template>

<script setup lang='ts'>
import { ref,reactive } from 'vue'

</script>

<style scoped>

</style>

B和C的结构与A相同，只是文字变了