setupComponent

稳定性: 实验性 ⚠️ 实验性功能，风险自负

TIP

如果使用 setupComponent 时，不能禁用 defineRender。

默认情况下将会忽略 node_modules 中的文件。

使用 defineSetupComponent 可以将 <script setup> 中的代码放在 纯 JS/TS(X) 中，而不需要使用 Vue Language Tools (Volar) 扩展。

特性	支持
Vue 3	✅
Nuxt 3	❌
Vue 2	❌
TypeScript	❌

另请参见 Vue Vine - Vue 函数组件的另一种风格。

基本用法

tsx

export const App
 = defineSetupComponent
(() => {
  defineProps
<{
    foo
: string
  }>()

  defineEmits
<{
    (evt
: 'change'): void
  }>()

  defineOptions
({
    name
: 'App',
  })

  // ...
  return <div
 />
})

类型注解

export const App
: SetupFC
 = () => {
  defineProps
<{
    foo
: string
  }>()

  defineEmits
<{
    (evt
: 'change'): void
  }>()

  defineOptions
({
    name
: 'App',
  })
}