在 Vue 世界里，name 不是装饰，而是组件的「身份标识」。它能让递归组件找到回家的路，能让 keep-alive 精准缓存，也能让 DevTools 的层级树一目了然。
一、如何给组件设置name
Vue2 Options API
export default {
name: 'UserCard',
data() { return { info: {} } }
}
Vue3 Composition API
<script setup>
defineOptions({ name: 'UserCard' })
</script>
注意：
defineOptions是编译宏，在<script setup>里一行即可。
二、name的三大权限
1.递归组件的自引用
当组件需要渲染自身时，Vue 用 name 作为注册键：
<!-- Folder.vue -->
<template>
<div>
<span>{{ folder.name }}</span>
<Folder v-for="c in folder.children" :folder="c" />
</div>
</template>
<script>
export default { name: 'Folder' } // 让 <Folder/> 找到自身
</script>
没有 name，递归渲染会失败。
2.keep-alive 的精准缓存
<keep-alive> 的 include/exclude 以 name 为键：
<keep-alive include="UserCard">
<router-view />
</keep-alive>
若组件缺失 name，缓存策略将降级为「组件实例哈希」，可能误杀或漏杀。
3.DevTools 的调试符号
打开 DevTools，所有组件的层级树、性能火焰图均以 name 展示。
缺失 name 时，调试器只能显示文件名或匿名标记，排查链路瞬间模糊。
三、不写 name 会怎样？
- 功能层面：普通展示组件仍能正常工作，但递归渲染、keep-alive 精确匹配会失效。
- 调试层面：DevTools 层级树一片
Anonymous，性能分析无从下手。 - 工程层面：大型项目里，「无名氏」会让代码检索、自动化脚本、文档生成全部受阻。
