vue3 <script setup> 接口调用方法

在Vue 3中，`<script setup>`是一个新的语法糖，它可以更简洁地编写组件的逻辑部分。通过`<script setup>`，你可以在组件中使用Composition API，而无需显式地导入和使用`import { ... } from 'vue'`。

下面是使用`<script setup>`的基本用法：

1. 首先，在Vue 3的单文件组件中，将`<script>`标签替换为`<script setup>`。

2. 在`<script setup>`中，你可以直接使用Composition API提供的函数和响应式变量，无需显式导入。例如，你可以直接使用`ref`、`reactive`、`computed`等函数。

3. 在`<script setup>`中，你可以使用`defineProps`和`defineEmits`来定义组件的属性和事件。这样可以更方便地声明和使用组件的属性和事件。

4. 在`<script setup>`中，你可以使用`onXXX`的方式来定义组件的生命周期钩子函数。例如，你可以使用`onMounted`、`onUpdated`等函数。

下面是一个简单的示例，展示了如何使用`<script setup>`：

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

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

const count = ref(0)

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

在上面的示例中，我们使用了`<script setup>`来定义了一个计数器组件。通过`ref`函数创建了一个响应式变量`count`，并定义了一个`increment`函数来增加计数器的值。在模板中，我们直接使用了`count`变量和`increment`函数。