Vue递归组件需显式命名、用v-if控制终止条件、合理设计props与事件通信，并注意懒加载和key稳定性。
Vue 中递归组件是处理嵌套数据结构（如菜单、组织架构、文件目录、评论回复）最自然的方式。关键在于让组件在模板中调用自身，并通过条件控制递归终止。
递归组件必须显式命名
Vue 要求递归调用的组件必须有 name 选项，否则无法在模板中正确识别自身。匿名组件或仅靠局部注册名无法递归。
✅ 正确写法：
export default {
name: 'MenuItem', // 必须定义！
props: ['item'],
template: `
<div class="menu-item">
<span>{{ item.label }}</span>
<MenuItem
v-for="child in item.children"
:key="child.id"
:item="child"
/>
</div>
`
}
用 v-if 控制递归边界，避免无限渲染
没有终止条件会导致栈溢出或页面卡死。通常依据子节点是否存在来决定是否继续递归。
立即学习“前端免费学习笔记（深入）”；
建议写法：
- 在递归调用前加 v-if="item.children && item.children.length"
- 不依赖
v-for自身的“空数组不渲染”逻辑——它不阻止组件实例化，仍会触发递归 - 对 null/undefined/空数组统一做防护，比如
:item="child || {}"配合子组件默认 props
合理设计 props 与事件通信
递归组件常需向父级或兄弟节点传递操作意图（如点击某项、展开折叠、拖拽排序），推荐方式：
- 通过 $emit 向上派发事件，由最外层父组件统一处理（如
@select="handleSelect"） - 避免在深层递归中直接修改父级数据，保持单向数据流
- 如需访问全局状态（如当前选中项），可用 provide/inject 或 Pinia store，减少 props 层层透传
性能优化：懒加载 + key 稳定性
深层嵌套或大数据量时，注意两点：
- 用 v-show 或动态组件控制子节点显隐，比销毁重建更轻量；需要完全卸载时再用 v-if
-
:key 必须唯一且稳定（推荐用路径标识，如
"node-${item.id}-${depth}"），避免因顺序变化导致组件复用错乱 - 必要时用 Object.freeze 冻结原始数据，防止响应式开销过大
不复杂但容易忽略。只要命名到位、边界清晰、通信得当，递归组件就能把树形逻辑写得干净又可靠。
