<script setup> 是什么？

在Vue 3中，<script setup> 是一个新的 <script> 标签语法，用于在组件中使用 “Composition API” 的语法，并且它使得编写逻辑更加简洁和清晰。Composition API 是 Vue 3 中引入的一组函数式 API，用于更好地组织和重用组件逻辑。

当你在组件中使用 <script setup> 时，你不再需要像传统的 Options API 那样分别编写 data、methods、computed 等选项。相反，你可以使用 defineProps、defineEmits 和其他函数来定义和使用 props、emits 和其他组件选项。这样可以大大简化组件的代码，并且更容易阅读和维护。

在使用 <script setup> 时，你可以将 lang 属性设置为 "ts"，表示你的代码将是 TypeScript 语法。

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

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

<script setup lang="ts">
import { ref } from 'vue';

const count = ref(0);

const increment = () => {
  count.value++;
};
</script>

在这个例子中，我们使用 <script setup> 来定义组件的逻辑部分，导入了 ref 函数，并创建了一个 count 响应式引用和一个 increment 方法。这些代码会被自动转换为组件选项，并且不需要显式地在 setup() 函数中返回。

还能不能用传统的 Options API编写代码？

在 <script setup> 中，是不推荐再像传统 Options API 那样分别编写 data、methods、computed 等选项的。<script setup> 的设计目标是为了简化组件代码，通过使用 Composition API 的函数式风格来组织逻辑。

如果你在 <script setup> 中尝试使用传统 Options API 的方式，Vue 会产生一个警告，并且这样的写法可能导致代码冗余和混乱，从而失去了 <script setup> 带来的好处。

例如，以下是不推荐的写法：

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

<script setup lang="ts">
import { ref } from 'vue';

const count = ref(0);

const increment = () => {
  count.value++;
};

// 不推荐以下写法
const data = {
  // data properties
};

const methods = {
  // methods
};

const computed = {
  // computed properties
};
</script>

如上所示，虽然技术上可以在 <script setup> 中定义 data、methods 和 computed，但这样做是不推荐的。如果你真的需要使用传统 Options API，应该使用普通的 <script> 标签来编写组件，而不是使用 <script setup>。

所以，当你使用 <script setup> 时，请尽量避免同时使用传统 Options API 的写法，而是专注于使用 Composition API 的方式组织你的组件逻辑。这样可以让代码更加简洁、清晰，并且更符合 Vue 3 的最佳实践。