Vue MacrossetupComponent
稳定性:
实验性 ⚠️ 实验性功能，风险自负TIP
如果你使用的是 setupComponent，则不能禁用 defineRender。
默认情况下不会忽略 node_modules 中的文件。
使用 defineSetupComponent, 可以将 <script setup> 中的代码放在没有 Volar 扩展的 纯 JS/TS(X) 中。
| 特性 | 支持 |
|---|---|
| Vue 3 | ✅ |
| Nuxt 3 | ❌ |
| Vue 2 | ❌ |
| TypeScript | ❌ |
基本用法
ts
export const App = defineSetupComponent(() => {
defineProps<{
foo: string
}>()
defineEmits<{
(evt: 'change'): void
}>()
defineOptions({
name: 'App',
})
// ...
})export const App = defineSetupComponent(() => {
defineProps<{
foo: string
}>()
defineEmits<{
(evt: 'change'): void
}>()
defineOptions({
name: 'App',
})
// ...
})类型注解
ts
export const App: SetupFC = () => {
defineProps<{
foo: string
}>()
defineEmits<{
(evt: 'change'): void
}>()
defineOptions({
name: 'App',
})
}export const App: SetupFC = () => {
defineProps<{
foo: string
}>()
defineEmits<{
(evt: 'change'): void
}>()
defineOptions({
name: 'App',
})
}已知的问题
- TypeScript 支持尚未完成。
- Source map 不能正确映射。