vue的<script setup>和<script>有什么区别

`<script setup>` 是 Vue 3 中的新特性，用来简化组件开发过程。相比于传统的 `<script>` 语法，它具有以下几个优点：

1. 省略了 `import` 和 `export`：在 `<script>` 中，我们需要手动导入组件所需的依赖，然后再导出组件。而在 `<script setup>` 中，我们可以直接使用 `import` 和 `export`，不需要重复书写。
2. 自动解构Props：在 `<script>` 中，需要手动解构 `props` 对象才能使用，而在 `<script setup>` 中，可以直接使用 `props` 对象中的属性，无需解构。
3. 自动注入上下文：在 `<script>` 中，我们需要手动注入上下文（如 `this` 或 `context`），然后再使用它们。而在 `<script setup>` 中，这些上下文自动注入，可以直接使用。
4. 更简洁的语法：在 `<script>` 中，需要手动定义组件中的方法和变量，而在 `<script setup>` 中，可以直接定义变量和方法，让代码更加简洁。

总的来说，`<script setup>` 可以让我们更加专注于组件的核心逻辑，而不用关注太多底层细节。同时，它还可以让组件的代码更加简洁易懂。