Vue3script setup

在Vue 3中，`<script setup>` 是一个新的语法糖，可以帮助我们更简洁地编写组件代码。它将`<script>` 标签中的选项与`<template>` 标签中的模板代码结合在一起。

使用`<script setup>`，你可以在组件中像编写普通的 JavaScript 函数一样定义 props、data、methods 等选项。同时，它还提供了一个 `defineProps` 函数，用于定义组件的 props，以及一个 `defineEmits` 函数，用于定义组件的事件。

下面是一个使用`<script setup>`的示例：

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

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

const count = ref(0)

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

在上面的示例中，我们使用`<script setup>`定义了一个 `count` 的响应式数据和一个 `increment` 的方法。然后在模板中使用`count` 和 `increment`。

请注意，使用 `<script setup>` 时，我们不需要再像以前那样显式地导入和声明组件选项（如 `props`、`data`、`methods` 等）。它会根据代码上下文自动推断出这些选项。

希望能对你有所帮助！如果有任何问题，请随时提问。