vue中script标签的setup

`<script setup>` 是 Vue 3 中新增的语法糖，它可以让我们更方便地编写基于组合 API 的组件。

`<script setup>` 标签中的代码是组件逻辑的主要部分，它定义了组件的状态、函数、生命周期等等。与传统的组件定义方式不同，`<script setup>` 中定义的变量和函数都会自动成为组件模板中的变量和函数，无需手动导入或导出。

使用 `<script setup>` 语法糖有以下几个优点：

- 精简代码：组件模板中不需要再引入和调用变量和函数
- 更好的类型推断：TypeScript 可以更好地推断出组件中变量和函数的类型
- 更好的性能：在编译时可以更好地优化组件，提高渲染性能

以下是一个简单的使用 `<script setup>` 的例子：

<template>
  <div>{{ count }}</div>
  <button @click="increment">Increment</button>
</template>

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

const count = ref(0)

function increment() {
  count.value++
}
</script>

在上面的例子中，我们使用 `ref` 创建了一个响应式的 `count` 变量，并定义了一个 `increment` 函数来修改 `count` 的值。在组件模板中，我们直接使用 `count` 变量和 `increment` 函数，无需再进行导入或导出。