defineOptions的用法

1. 设置组件的 name 选项

作用：在 <script setup> 中定义组件选项（如 name、inheritAttrs 等）。

来源：它不是 Vue 核心 API，通常由插件（如 unplugin-vue-define-options 或 vite-plugin-vue-setup-extend）提供。

编译时处理：构建工具会在编译阶段将选项注入组件。

代码含义:

defineOptions({
  name: 'Home'
});
设置当前组件的 name 选项为 'Home'。

name 的作用：

递归组件：组件内部调用自身时需命名。

开发者工具：在 Vue Devtools 中显示组件名称。

<keep-alive> 缓存：通过 include/exclude 匹配组件名。

2、配合 vue 文档生成插件（vue-docgen-cli）生成文档

不用 defineOptions({})

<script setup lang="ts">
/**
 * 根组件
 */
</script>

<template>
  <RouterView></RouterView>
</template>

<style scoped></style>

生成的文档 App.md，不显示JsDoc注释内容，如下：

---

使用 defineOptions({})

<script setup lang="ts">
/**
 * 根组件
 */
defineOptions({}); // 这行代码是为文档生成插件（vue-docgen-cli）生成文档
</script>

<template>
  <RouterView></RouterView>
</template>

<style scoped></style>

生成的文档 App.md，显示JsDoc注释内容，如下：