vue v -for实现递归

Vue 中使用 v-for 实现递归

在 Vue 中，可以通过组件递归调用的方式结合 v-for 实现递归渲染树形结构或嵌套数据。

递归组件的基本实现

定义一个组件，并在组件内部调用自身，配合 v-for 遍历子节点数据。

<template>
  <div>
    <div>{{ node.name }}</div>
    <recursive-component
      v-for="child in node.children"
      :key="child.id"
      :node="child"
    />
  </div>
</template>

<script>
export default {
  name: 'RecursiveComponent',
  props: {
    node: Object
  }
}
</script>

使用组件时传入数据

在父组件中调用递归组件，并传入树形结构数据。

<template>
  <recursive-component :node="treeData" />
</template>

<script>
import RecursiveComponent from './RecursiveComponent.vue'

export default {
  components: { RecursiveComponent },
  data() {
    return {
      treeData: {
        id: 1,
        name: 'Root',
        children: [
          {
            id: 2,
            name: 'Child 1',
            children: []
          },
          {
            id: 3,
            name: 'Child 2',
            children: [
              {
                id: 4,
                name: 'Grandchild',
                children: []
              }
            ]
          }
        ]
      }
    }
  }
}
</script>

注意事项

确保递归有终止条件，避免无限循环。通常通过判断 children 是否为空来终止递归。

<template>
  <div>
    <div>{{ node.name }}</div>
    <template v-if="node.children && node.children.length">
      <recursive-component
        v-for="child in node.children"
        :key="child.id"
        :node="child"
      />
    </template>
  </div>
</template>

动态导入组件

如果组件在自身模板中直接使用自身名称，需要在 components 选项中注册。

export default {
  name: 'RecursiveComponent',
  props: {
    node: Object
  },
  components: {
    RecursiveComponent: () => import('./RecursiveComponent.vue')
  }
}

性能优化

对于深层嵌套结构，考虑使用虚拟滚动或分页加载来优化性能，避免一次性渲染过多节点。

<template>
  <div>
    <div>{{ node.name }}</div>
    <template v-if="shouldRenderChildren">
      <recursive-component
        v-for="child in visibleChildren"
        :key="child.id"
        :node="child"
      />
    </template>
  </div>
</template>

<script>
export default {
  props: {
    node: Object,
    depth: {
      type: Number,
      default: 0
    }
  },
  computed: {
    shouldRenderChildren() {
      return this.depth < 5 && this.node.children && this.node.children.length
    },
    visibleChildren() {
      return this.node.children.slice(0, 10)
    }
  }
}
</script>

通过以上方法，可以在 Vue 中高效地使用 v-for 实现递归渲染。