使用<script setup>书写js部分

在Vue3中，可以使用`<script setup>`标签来书写组件的JS部分，它可以让我们更加简洁地书写组件逻辑。下面是一个示例：

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

<script setup>
let count = 0

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

上面的代码中，我们使用了`<script setup>`标签来书写组件的JS部分。在`<script setup>`中，我们可以直接声明变量和函数，不需要使用`data`和`methods`等选项来声明。同时，我们也不需要显式地返回一个对象，组件的数据和方法都会自动暴露在组件的模板中。在`<script setup>`中声明的变量和函数会自动响应式地绑定到模板中，所以在模板中使用它们时不需要使用`this`关键字。

需要注意的是，`<script setup>`只能包含变量和函数的声明，不能包含其他语句，如`if`、`for`等控制语句。如果需要使用这些控制语句，可以在`<template>`中使用Vue3的模板语法来实现。