【Vue】＜script setup＞和 ＜script＞区别是什么？在使用时的写法区别？

<script setup> 是 Vue 3 引入的一种新的脚本语法，它提供了一种更简洁和声明式的方式来编写组件逻辑。它是为了解决传统 <script> 标签在 Vue 单文件组件（SFC）中的一些局限性而设计的。

<script setup> 与 <script> 标签的主要区别：

<script setup> 的特点：

1. 组合式 API：<script setup> 强制使用组合式 API，这是 Vue 3 推荐的方式来组织组件逻辑。

2. 更少的样板代码：不需要 export default 来暴露组件选项。

3. 自动引入：在 <script setup> 中定义的变量、函数等会自动在模板中可用，无需使用 ref 或 reactive 显式声明响应式状态。

4. 更好的类型推断：TypeScript 支持更直接，不需要额外的类型声明。

5. 更清晰的逻辑复用：通过组合式 API，逻辑可以更容易地在组件之间复用。

<script> 的特点：

1. 选项式 API：使用 <script> 标签时，你可以选择使用选项式 API 或组合式 API。

2. 需要 export default：在 <script> 中，你需要使用 export default 来定义组件选项。

3. 显式响应式声明：使用 ref、reactive、computed 等函数显式声明响应式状态。

4. 模板绑定：在模板中使用响应式状态时，需要通过 {{ }} 插值或 v-bind 来绑定。

使用时的写法区别：

使用 <script setup>：

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

const count = ref(0);

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

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

使用 <script>：

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

export default {
  setup() {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    return { count, increment };
  },
};
</script>

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

在 <script setup> 中，count 和 increment 函数直接在模板中可用，而在 <script> 中，它们需要通过 return 语句从 setup 函数中返回，以便在模板中使用。

总的来说，<script setup> 提供了一种更现代、更简洁的方式来编写 Vue 组件，它鼓励使用组合式 API，并且减少了样板代码。随着 Vue 3 的普及，<script setup> 可能会成为编写 Vue 组件的主流方式。