在 Vue 3 中渲染树结构数据通常涉及递归组件的使用。递归组件是指一个组件在其模板中调用自身以处理嵌套结构。对于树结构数据，这是一个非常常见和有效的解决方案。

以下是一个简单的示例，展示如何在 Vue 3 中渲染树结构数据。

//treeComponent.vue
<script setup>
    defineProps({
        data:{
            type:Array,
            default:[]
        }
    })
    const hasChildren = ()=>{
        return data.children && data.children.length>0
    }
</script>
<template>
    <div class="tree-outer" v-for="(item,index) in data" :key="item.id">
        <div class="tree-inner">
            |-{{item.name}}
            <div class="children-box" v-if="hasChildren">
                <treeComponent :data="item.children" />
            </div>
        </div>
    </div>
</template>
<style scoped>
    .children-box{
        margin-left: 20px;
    }
</style>

组件使用：

<script setup>
    import {ref} from 'vue'
    import treeComponent from './components/treeComponent.vue'

    const treeData = ref([
        {
            id:1,
            name:'name-1',
            children:[
                {
                    id:11,
                    name:'name-11'
                },
                {
                    id:12,
                    name:'name-12'
                }
            ]
        },
        {
            id:2,
            name:'name-2',
            children:[
                {
                    id:21,
                    name:'name-21',
                    children:[
                        {
                            id:211,
                            name:'name-211'
                        },
                        {
                            id:212,
                            name:'name-212'
                        }
                    ]
                },
                {
                    id:22,
                    name:'name-22'
                }
            ]
        },
        {
            id:3,
            name:'name-3'
        }
    ])

    //通过id获取树结构item
    const getItem = (data,id) =>{
        for (let item of data) {
            if(item.id == id){
                return item
            }
            if(item.children && item.children.length>0){
                let childNode = getItem(item.children,id)
                if(childNode){
                    return childNode
                }
            }
        }
        return null;
    }
    let gotItem = getItem(treeData.value,211)
    console.log(gotItem)    //{id:211,name:'name-211'}
</script>

<template>
    <treeComponent :data="treeData" />
</template>

数据渲染效果：

通过这种方式，你可以轻松地在 Vue 3 应用中渲染树结构数据。