208 - 树组件

[mu-muw]

// 你的答案 直接一直遍历在 <ul> 标签中，使用 v-if 指令来判断子列表是否存在且长度大于 0，而不是使用 :v-if="item.children"。这样，你就可以避免在渲染 <ul> 标签时为空子列表创建新的 <li> 元素。

在 <li> 标签中，使用 :key 指令来绑定 key 属性。这样，浏览器就可以利用 index 属性来跟踪列表项的顺序，从而避免创建新的列表项。

在 <ul> 标签中，使用 v-for 指令来遍历子列表中的每个对象，并将它的属性作为响应式绑定到模板中的元素。当 children 属性存在时，它会渲染一个名为 <ul> 的子组件，并将 children 属性传递给它。

在 <li> 标签中，使用 :key 指令来绑定 key 属性。这样，浏览器就可以利用 childIndex 属性来跟踪子列表项的顺序，从而避免创建新的列表项。
<script setup lang="ts">
interface TreeData {
  key: string
  title: string
  children: TreeData[]
}
defineProps<{ data: TreeData[] }>()
</script>

<template>
  <div>
    <ul>
      <li v-for="(item, index) in data" :key="index">
        <span>{{ item.title }}</span>
        <ul v-if="item.children && item.children.length > 0">
          <li v-for="(child, childIndex) in item.children" :key="childIndex">
            <span>{{ child.title }}</span>
            <ul v-if="child.children && child.children.length > 0">
              <li v-for="(grandchild, grandchildIndex) in child.children" :key="grandchildIndex">
                <span>{{ grandchild.title }}</span>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
 </template>