【Vue3.0Api——单文件组件】

<script setup>是在单文件组件(SFC)中使用组合式API的编译时语法糖

基本语法

<script setup>
console.log('hello setup')
</script>

里面的代码会被编译成setup()函数的内容，每次组件实例被创建的时候执行
可以声明变量、函数、文件引入

<script setup>
import { capitalize } from './helpers'
// 变量
const msg = 'Hello!'

// 函数
function log() {
  console.log(msg)
}
</script>
<template>
	<div>{{msg}}</div>
</template>

响应式

同样可以会用响应式API。和setup()函数的返回值一样

<script setup>
import {ref} from 'vue'
const count = ref(0)
</script>
<template>
	<button @click = 'count++'></button>
</temlate>

使用组件

使用局部引入的组件可以不用像vue2.0那样需要进行components注册了，可以直接使用

<script setup>
import MyComponent from './MyComponent.vue'
</script>
<template>
	<MyComponent/>
</template>

动态组件

通过<component :is="组件名"/>

<script setup>
	import Foo from './Foo.vue'
	import Bar from './Bar.vue'
</script>
<template>
	<component  :is="Foo"/>
	<component  :is="someCondition ? Foo : Bar"/>
<template>

递归组件

这种方式相比于导入的组件优先级更低。如果有具名的导入和组件自身推导的名字冲突了，可以为导入的组件添加别名

import {FooBar as FooBarChild} from './components'

命名空间组件

可以使用带.的组件标签，例如<Foo.Bar>

<script setup>
import * as Form from './form-components'
</script>
<template>
	<Form.Input>
		<Form.Lable></Form.Lable>
	</Form.Input>
</template>

//index.js
import input from './input.vue'
import lable from './lable.vue'
export {
	input,
	lable
}

使用自定义指令

<script setup>
	const vMyDirective = {
	  beforeMount: (el) => {
	    // 在元素上做些操作
	  }
	}
</script>
<template>
  <h1 v-my-directive>This is a Heading</h1>
</template>
<script setup>
import { myDirective as vMyDirective } from './MyDirective.js'
</script>

defineProps（）和defineEmits（）

为了在声明 props 和 emits 选项时获得完整的类型推导支持，我们可以使用 defineProps 和 defineEmits API，它们将自动地在 <script setup> 中可用：

<script setup>
const props = defineProps({
  foo: String
})

const emit = defineEmits(['change', 'delete'])
// setup 代码
</script>

defineProps 和 defineEmits 都是只能在 <script setup> 中使用的编译器宏。他们不需要导入，且会随着<script setup>的处理过程一同被编译掉。

defineProps 接收与 props 选项相同的值，defineEmits 接收与 emits 选项相同的值。

defineProps 和 defineEmits 在选项传入后，会提供恰当的类型推导。

传入到 defineProps 和 defineEmits 的选项会从 setup 中提升到模块的作用域。因此，传入的选项不能引用在 setup 作用域中声明的局部变量。这样做会引起编译错误。但是，它可以引用导入的绑定，因为它们也在模块作用域内。

针对类型的 props/emit 声明

props 和 emit 也可以通过给 defineProps 和 defineEmits 传递纯类型参数的方式来声明：

const props = defineProps<{
  foo: string
  bar?: number
}>()

const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()

// 3.3+：另一种更简洁的语法
const emit = defineEmits<{
  change: [id: number] // 具名元组语法
  update: [value: string]
}>()

defineProps 或 defineEmits 要么使用运行时声明，要么使用类型声明。同时使用两种声明方式会导致编译报错。

使用类型声明的时候，静态分析会自动生成等效的运行时声明，从而在避免双重声明的前提下确保正确的运行时行为。

在开发模式下，编译器会试着从类型来推导对应的运行时验证。例如这里从 foo: string 类型中推断出 foo: String。如果类型是对导入类型的引用，这里的推导结果会是 foo: null (与 any 类型相等)，因为编译器没有外部文件的信息。

在生产模式下，编译器会生成数组格式的声明来减少打包体积 (这里的 props 会被编译成 [‘foo’, ‘bar’])。

在 3.2 及以下版本中，defineProps() 的泛型类型参数只能使用类型字面量或者本地接口的引用。

这个限制已经在 3.3 版本中解决。最新版本的 Vue 支持在类型参数的位置引用导入的和有限的复杂类型。然而，由于类型到运行时的转换仍然基于 AST，因此并不支持使用需要实际类型分析的复杂类型，例如条件类型等。你可以在单个 prop 的类型上使用条件类型，但不能对整个 props 对象使用。

使用类型声明时的默认 props 值

针对类型的 defineProps 声明的不足之处在于，它没有可以给 props 提供默认值的方式。为了解决这个问题，我们还提供了 withDefaults 编译器宏：

export interface Props {
  msg?: string
  labels?: string[]
}

const props = withDefaults(defineProps<Props>(), {
  msg: 'hello',
  labels: () => ['one', 'two']
})

上面代码会被编译为等价的运行时 props 的 default 选项。此外，withDefaults 辅助函数提供了对默认值的类型检查，并确保返回的 props 的类型删除了已声明默认值的属性的可选标志。

defineExpose()

使用

可以通过 defineExpose 编译器宏来显式指定在

<script setup>
import { ref } from 'vue'

const a = 1
const b = ref(2)

defineExpose({
  a,
  b
})
</script>

当父组件通过模板引用的方式获取到当前组件的实例，获取到的实例会像这样 { a: number, b: number } (ref 会和在普通实例中一样被自动解包)

defineOptions()

这个宏可以用来直接在

<script setup>
defineOptions({
  inheritAttrs: false,
  customOptions: {
    /* ... */
  }
})
</script>

这是一个宏定义，选项将会被提升到模块作用域中，无法访问 <script setup> 中不是字面常数的局部变量。

defineSlots()

这个宏可以用于为 IDE 提供插槽名称和 props 类型检查的类型提示。

defineSlots() 只接受类型参数，没有运行时参数。类型参数应该是一个类型字面量，其中属性键是插槽名称，值类型是插槽函数。函数的第一个参数是插槽期望接收的 props，其类型将用于模板中的插槽 props。返回类型目前被忽略，可以是 any，但我们将来可能会利用它来检查插槽内容。

它还返回 slots 对象，该对象等同于在 setup 上下文中暴露或由 useSlots() 返回的 slots 对象。

<script setup lang="ts">
const slots = defineSlots<{
  default(props: { msg: string }): any
}>()
</script>

useSlots() 和 useAttrs()

在

<script setup>
import { useSlots, useAttrs } from 'vue'

const slots = useSlots()
const attrs = useAttrs()
</script>

useSlots 和 useAttrs 是真实的运行时函数，它的返回与 setupContext.slots 和 setupContext.attrs 等价。它们同样也能在普通的组合式 API 中使用。

与普通的

<script setup> 可以和普通的

声明无法在 <script setup> 中声明的选项，例如 inheritAttrs 或插件的自定义选项 (在 3.3+ 中可以通过 defineOptions 替代)。
声明模块的具名导出 (named exports)。
运行只需要在模块作用域执行一次的副作用，或是创建单例对象。

<script>
// 普通 <script>, 在模块作用域下执行 (仅一次)
runSideEffectOnce()

// 声明额外的选项
export default {
  inheritAttrs: false,
  customOptions: {}
}
</script>

<script setup>
// 在 setup() 作用域中执行 (对每个实例皆如此)
</script>

在同一组件中将<script setup>与 <script> 结合使用的支持仅限于上述情况。具体来说：

不要为已经可以用 <script setup> 定义的选项使用单独的<script>部分，如 props 和 emits。
在 <script setup> 中创建的变量不会作为属性添加到组件实例中，这使得它们无法从选项式 API 中访问。我们强烈反对以这种方式混合 API。
如果你发现自己处于以上任一不被支持的场景中，那么你应该考虑切换到一个显式的 setup() 函数，而不是使用 <script setup>。

顶层 await

<script setup> 中可以使用顶层 await。结果代码会被编译成 async setup()：

<script setup>
	const post = await fetch(`/api/post/1`).then((r) => r.json())
</script>

另外，await 的表达式会自动编译成在 await 之后保留当前组件实例上下文的格式。

async setup() 必须与 Suspense 内置组件组合使用，Suspense 目前还是处于实验阶段的特性，会在将来的版本中稳定。

泛型

可以使用 <script> 标签上的 generic 属性声明泛型类型参数：

<script setup lang="ts" generic="T">
defineProps<{
  items: T[]
  selected: T
}>()
</script>

generic 的值与 TypeScript 中位于 <…> 之间的参数列表完全相同。例如，您可以使用多个参数，extends 约束，默认类型和引用导入的类型：

<script
  setup
  lang="ts"
  generic="T extends string | number, U extends Item"
>
import type { Item } from './types'
defineProps<{
  id: T
  list: U[]
}>()
</script>

限制

由于模块执行语义的差异，<script setup> 中的代码依赖单文件组件的上下文。当将其移动到外部的 .js 或者 .ts 文件中的时候，对于开发者和工具来说都会感到混乱。因此，<script setup> 不能和 src attribute 一起使用。