vue3在script中写setup使用

在Vue 3中，我们可以使用`<script setup>`来编写组件的逻辑部分，而不需要再使用`data`、`methods`、`computed`等选项。`<script setup>`是Vue 3中新引入的特性，它可以更简洁地定义组件的逻辑，并且具有更好的响应式能力。

下面是一个示例，展示了如何在`<script setup>`中使用Vue 3的`setup()`函数：

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

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

// 使用 ref() 创建响应式数据
const count = ref(0);

// 定义方法
function increment() {
  count.value++;
}
</script>

在上面的例子中，我们使用`import`语句导入了`ref`函数，然后在`setup()`函数内部使用`ref()`创建了一个名为`count`的响应式数据。我们还定义了一个名为`increment`的方法，用于增加`count`的值。在模板中，我们可以直接使用`count`和`increment`，它们会自动地与组件实例进行关联。

需要注意的是，在`<script setup>`中，我们不需要再使用`this`来访问组件实例，而是直接通过变量名来访问响应式数据和方法。此外，Vue 3还提供了其他一些新的特性，如`toRefs`和`reactive`等，用于处理更复杂的响应式数据和逻辑。