<script setup> 语法
\
里面的代码会被编译成组件 `setup()` 函数的内容。这意味着与普通的 `<script>` 只在组件被首次引入的时候执行一次不同，`
<template>
<button @click="log">{{ msg }}</button>
</template>import 导入的内容也会以同样的方式暴露。这意味着我们可以在模板表达式中直接使用导入的 helper 函数，而不需要通过 methods 选项来暴露它：
vue
<template>
<div>{{ capitalize('hello') }}</div>
</template>响应式 {#reactivity}
响应式状态需要明确使用响应式 API 来创建。和 setup() 函数的返回值一样，ref 在模板中使用的时候会自动解包：
vue
<template>
<button @click="count++">{{ count }}</button>
</template>使用组件 {#using-components}
`
这里 MyComponent 应当被理解为像是在引用一个变量。如果你使用过 JSX，此处的心智模型是类似的。其 kebab-case 格式的 <my-component> 同样能在模板中使用——不过，我们强烈建议使用 PascalCase 格式以保持一致性。同时这也有助于区分原生的自定义元素。
动态组件 {#dynamic-components}
由于组件是通过变量引用而不是基于字符串组件名注册的，在 `
请注意组件是如何在三元表达式中被当做变量使用的。
递归组件 {#recursive-components}
一个单文件组件可以通过它的文件名被其自己所引用。例如：名为 FooBar.vue 的组件可以在其模板中用 <FooBar/> 引用它自己。
请注意这种方式相比于导入的组件优先级更低。如果有具名的导入和组件自身推导的名字冲突了，可以为导入的组件添加别名：
js
import { FooBar as FooBarChild } from './components'命名空间组件 {#namespaced-components}
可以使用带 . 的组件标签，例如 <Foo.Bar> 来引用嵌套在对象属性中的组件。这在需要从单个文件中导入多个组件的时候非常有用：
vue
<template>
<Form.Input>
<Form.Label>label</Form.Label>
</Form.Input>
</template>使用自定义指令 {#using-custom-directives}
全局注册的自定义指令将正常工作。本地的自定义指令在 `
This is a Heading
```如果指令是从别处导入的，可以通过重命名来使其符合命名规范：
vue
defineProps() 和 defineEmits() {#defineprops-defineemits}
为了在声明 props 和 emits 选项时获得完整的类型推导支持，我们可以使用 defineProps 和 defineEmits API，它们将自动地在 `
- `defineProps` 和 `defineEmits` 都是只能在 `
> ```
>
> ```vue [Parent.vue]
>
>
> <template>
> <Child v-model="myRef"></Child>
> </template>
> ```
### 修饰符和转换器 {#modifiers-and-transformers}
为了获取 `v-model` 指令使用的修饰符，我们可以像这样解构 `defineModel()` 的返回值：
```js
const [modelValue, modelModifiers] = defineModel()
// 对应 v-model.trim
if (modelModifiers.trim) {
// ...
}当存在修饰符时，我们可能需要在读取或将其同步回父组件时对其值进行转换。我们可以通过使用 get 和 set 转换器选项来实现这一点：
js
const [modelValue, modelModifiers] = defineModel({
// get() 省略了，因为这里不需要它
set(value) {
// 如果使用了 .trim 修饰符，则返回裁剪过后的值
if (modelModifiers.trim) {
return value.trim()
}
// 否则，原样返回
return value
}
})在 TypeScript 中使用 {#usage-with-typescript}
与 defineProps 和 defineEmits 一样，defineModel 也可以接收类型参数来指定 model 值和修饰符的类型：
ts
const modelValue = defineModel<string>()
// ^? Ref<string | undefined>
// 用带有选项的默认 model，设置 required 去掉了可能的 undefined 值
const modelValue = defineModel<string>({ required: true })
// ^? Ref<string>
const [modelValue, modifiers] = defineModel<string, "trim" | "uppercase">()
// ^? Record<'trim' | 'uppercase', true | undefined>defineExpose() {#defineexpose}
使用 `
当父组件通过模板引用的方式获取到当前组件的实例，获取到的实例会像这样 `{ a: number, b: number }` (ref 会和在普通实例中一样被自动解包)
## defineOptions() {#defineoptions}
- 仅在 3.3+ 中支持
这个宏可以用来直接在 `- 这是一个宏定义，选项将会被提升到模块作用域中，无法访问 `
## `useSlots()` 和 `useAttrs()` {#useslots-useattrs}
在 `useSlots 和 useAttrs 是真实的运行时函数，它们的返回值分别与 setupContext.slots 和 setupContext.attrs 等价。它们同样也能在普通的组合式 API 中使用。
与普通的 <script> 一起使用 {#usage-alongside-normal-script}
`
在同一组件中将 `另外，await 的表达式会自动编译成在 await 之后保留当前组件实例上下文的格式。
:::warning 注意
async setup() 必须与 Suspense 组合使用，该特性目前仍处于实验阶段。我们计划在未来的版本中完成该特性并编写文档——但如果你现在就感兴趣，可以参考其测试来了解其工作方式。
:::
导入语句 {#imports-statements}
Vue 中的导入语句遵循 ECMAScript 模块规范。
此外，你还可以使用构建工具配置中定义的别名：
vue
泛型 {#generics}
可以使用 <script> 标签上的 generic 属性声明泛型类型参数：
vue
<script setup lang="ts" generic="T">
defineProps<{
items: T[]
selected: T
}>()
</script>generic 的值与 TypeScript 中位于 <...> 之间的参数列表完全相同。例如，你可以使用多个参数，extends 约束，默认类型和引用导入的类型：
vue
<script
setup
lang="ts"
generic="T extends string | number, U extends Item"
>
import type { Item } from './types'
defineProps<{
id: T
list: U[]
}>()
</script>当无法自动推断泛型组件的具体类型时，可使用指令 @vue-generic 来显式指定：
vue
<template>
<!-- @vue-generic {import('@/api').Actor} -->
<ApiSelect v-model="peopleIds" endpoint="/api/actors" id-prop="actorId" />
<!-- @vue-generic {import('@/api').Genre} -->
<ApiSelect v-model="genreIds" endpoint="/api/genres" id-prop="genreId" />
</template>为了在 ref 中使用泛型组件的引用，你需要使用 vue-component-type-helpers 库，因为 InstanceType 在这种场景下不起作用。
vue
<script
setup
lang="ts"
>
import componentWithoutGenerics from '../component-without-generics.vue';
import genericComponent from '../generic-component.vue';
import type { ComponentExposed } from 'vue-component-type-helpers';
// 适用于没有泛型的组件
ref<InstanceType<typeof componentWithoutGenerics>>();
ref<ComponentExposed<typeof genericComponent>>();
</script>限制 {#restrictions}
- 由于模块执行语义的差异，
<script setup>中的代码依赖单文件组件的上下文。当将其移动到外部的.js或者.ts文件中的时候，对于开发者和工具来说都会感到混乱。因此，<script setup>不能和srcattribute 一起使用。 <script setup>不支持 DOM 内根组件模板。(相关讨论)
帮助我们改进文档
发现翻译问题或内容错误？请告诉我们。