vue3中的单文件组件＜script setup＞

<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。相比于普通的 <script> 语法，它具有更多优势：

• 更少的样板内容，更简洁的代码。

• 能够使用纯 TypeScript 声明 props 和自定义事件。

• 更好的运行时性能 (其模板会被编译成同一作用域内的渲染函数，避免了渲染上下文代理对象)。

• 更好的 IDE 类型推导性能 (减少了语言服务器从代码中抽取类型的工作)。

1、基本语法

要启用该语法，需要在 <script> 代码块上添加 setup attribute：

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

(1)、<script setup>里的代码会被编译成组件 setup() 函数的内容。

这意味着与普通的 <script> 只在组件被首次引入的时候执行一次不同，<script setup> 中的代码会在每次组件实例被创建的时候执行。

(2)、顶层的绑定会被暴露给模板

当使用<script setup> 的时候，任何在 <script setup> 声明的顶层的绑定 (包括变量，函数声明，以及 import 导入的内容) 都能在模板中直接使用：

<script setup>
// 变量
const msg = 'Hello!'

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

<template>
  <button @click="log">{{ msg }}</button>
</template>

import 导入的内容也会以同样的方式暴露。这意味着我们可以在模板表达式中直接使用导入的 helper 函数，而不需要通过 methods 选项来暴露它：

<script setup>
import { capitalize } from './helpers'

</script>

<template>
  <div>{{ capitalize('hello') }}</div>
</template>

2、响应式

响应式状态需要明确使用响应式API来创建。和 setup() 函数的返回值一样，ref 在模板中使用的时候会自动解包：

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

const count = ref(0)

</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

3、使用组件

<script setup> 范围里的值也能被直接作为自定义组件的标签名使用，不用显式的注册了。

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

</script>

<template>
  <MyComponent />
</template>

4、使用自定义指令

全局注册的自定义指令将正常工作。本地的自定义指令在 <script setup> 中不需要显式注册，但他们必须遵循 vNameOfDirective 这样的命名规范：

<script setup>
    
const vMyDirective = {
  beforeMount: (el) => {
    // 在元素上做些操作
  }
}

</script>
<template>
  <h1 v-my-directive>This is a Heading</h1>
</template>

如果指令是从别处导入的，可以通过重命名来使其符合命名规范：

<script setup>
    //import 导入模块时，可以使用as给模块起个别名。
	import { myDirective as vMyDirection } from './MyDirective.js'
    
</script>

5、defineProps() 和 defineEmits()

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

defineProps是个 宏。所以，不用引入。

<script setup>

//声明属性
const props = defineProps({
   foo: String
})

//使用属性：
console.log(props.foo);

//声明事件
const emit = defineEmits(['change', 'delete'])

//触发事件
emit("change",12); 

// setup 代码

</script>

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

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

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

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

如果使用了 TypeScript，使用纯类型声明来声明 prop 和 emit 也是可以的。

6、defineExpose

使用 <script setup> 的组件是默认关闭的——即通过模板引用或者 $parent 链获取到的组件的公开实例，不会暴露任何在<script setup> 中声明的绑定。

可以通过 defineExpose 编译器宏来显式指定在 <script setup> 组件中要暴露出去的属性：

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

const a = 1
const b = ref(2)

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

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

7、useSlots() 和 useAttrs()

在 <script setup> 使用 slots 和 attrs 的情况应该是相对来说较为罕见的，因为可以在模板中直接通过 $slots 和 $attrs 来访问它们。在你的确需要使用它们的罕见场景中，可以分别用 useSlots 和 useAttrs 两个辅助函数：

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

const slots = useSlots()
const attrs = useAttrs()

</script>

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

8、与普通的 <script> 一起使用

<script setup> 可以和普通的 <script>一起使用。普通的 <script> 在有这些需要的情况下或许会被使用到：

• 声明无法在<script setup> 中声明的选项，例如 inheritAttrs 或插件的自定义选项。

• 声明模块的具名导出 (named exports)。

• 运行只需要在模块作用域执行一次的副作用，或是创建单例对象。

  <script>
  // 普通 <script>, 在模块作用域下执行 (仅一次)
  runSideEffectOnce()
  
  // 声明额外的选项
  export default {
    inheritAttrs: false,
    customOptions: {},
  }
  </script>
  
  <script setup>
  // 在 setup() 作用域中执行 (对每个实例皆如此)
  </script>

  9、 顶层 await

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

  <script setup>
      
  const post = await fetch(`/api/post/1`).then((r) => r.json())
  
  </script>
  另外，await 的表达式会自动编译成在 await 之后保留当前组件实例上下文的格式。