如果你在 vue3 開發中使用了 <script setup> 語法的話，對于組件的 name 屬性，需要做一番額外的處理。
對于 vue@3.2.34 及以上版本，在使用 <script setup> 的單文件組件時，vue 會根據組件文件名，自動推導出 name 屬性。也就是名為 MyComponent.vue 或 my-component.vue 的文件， name 屬性為 MyComponent，而當你在組件內顯示定義 name 屬性時，會覆蓋推導出的名稱。
組件的 name 屬性不僅能用于 <KeepAlive>，而且在使用 vuejs-devtools 插件調試代碼的時候，對應組件也能顯示出其 name 屬性，方便我們快速定位代碼和調試。顯示的定義 name 屬性，是一個好習慣。
除此之外，如果我們要在 <script setup> 顯示定義 name 屬性，需要額外添加一個 script，也就是：
<script>
export default {
name: "MyComponent"
}
</script>
<script setup lang="ts">
...
<script>
稍顯繁瑣，對此社區推出了 unplugin-vue-define-options 來簡化該操作。
使用步驟非常簡單：
- 安裝
npm i unplugin-vue-define-options -D
- 配置 vite
// vite.config.ts
import DefineOptions from 'unplugin-vue-define-options/vite'
import Vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [Vue(), DefineOptions()],
})
- 使用 typescript 開發的時候，需要配置 typescript 支持
// tsconfig.json
{
"compilerOptions": {
// ...
"types": ["unplugin-vue-define-options/macros-global" /* ... */]
}
}
安裝配置完成后，就能使用其提供的 defineOptions API 來定義 name 屬性。
<script setup lang="ts">
defineOptions({
name: "MyComponent"
})
<script>
那么它是如何做到這一點的呢？
對于使用了 defineOptions 的代碼：
<script setup lang="ts">
import { useSlots } from 'vue'
defineOptions({
name: 'Foo',
inheritAttrs: false,
})
const slots = useSlots()
</script>
編譯后輸出為：
<script lang="ts">
export default {
name: 'Foo',
inheritAttrs: false,
props: {
msg: { type: String, default: 'bar' },
},
emits: ['change', 'update'],
}
</script>
<script setup>
const slots = useSlots()
</script>
可以發現，這和我們在上文中書寫 2 個 script 標簽是一樣的，也就是說，unplugin-vue-define-options 通過 vite 插件的方式，在編譯階段幫我們做了編寫 2 個 script 這一步，簡化了我們的開發。
