＜script＞和＜script setup＞的区别

在Vue 3中，<script setup>是Composition API的一个语法糖，它提供了一种更简洁的方式来编写组件逻辑。使用<script setup>，您可以在组件外部直接导入或定义方法和响应式数据，而不需要在setup()函数内部进行。

<script setup> 是Vue 3的Composition API的一个语法糖，它允许你以更声明式的方式编写组件。当你在<script>标签中使用<script setup>时，你可以直接在组件作用域内声明响应式状态和计算属性，而不需要在setup()函数内部。

lang="ts"是为TypeScript声明的，它告诉Vue你正在使用TypeScript作为项目的开发语言。

以下是<script setup>与常规<script>标签使用Composition API的对比示例：

使用<script setup>:

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

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

const count = ref(0);

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

在这个例子中，我们使用了<script setup>，并且因为是在<script setup>上下文中，所以可以直接使用ref声明响应式状态count，并且可以直接定义方法increment，而不需要将其包装在setup()函数中。

使用常规<script>:

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

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

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

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

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

以下是<script setup>与常规<script>标签使用Composition API的主要区别：

1. 导入和导出:

   • 常规<script> : 您需要在setup()函数内部导入所需的Composition API函数，如ref, reactive, computed等，并且您不能从外部直接导出或导入任何东西。
   • <script setup> : 您可以像在模块中一样直接导入和导出函数、响应式数据等，不必包装在setup()函数中。

2. 响应式数据的使用:

   • 常规<script> : 您需要通过setup()返回的对象来暴露需要响应式的数据和方法，这样它们才能在模板或其他组件中使用。
   • <script setup> : 您定义的响应式数据（使用ref, reactive, computed等）默认就是可响应式的，并且可以直接在模板中使用，无需额外的暴露步骤。

3. 代码结构:

   • 常规<script> : 遵循Vue 3 Composition API的标准结构，所有的逻辑都封装在setup()函数中。
   • <script setup>: 提供了一种更扁平化和直观的代码结构，可以减少模板和逻辑之间的跳转，提高代码的可读性。

4. TypeScript支持:

   • 常规<script> : 需要在setup()函数的参数中明确类型，如使用Props, Context等。
   • <script setup>: 提供了更好的类型推断，因为定义的响应式变量可以直接用于模板，所以类型信息更清晰。

5. 生命周期钩子:

   • 常规<script> : 生命周期钩子如onMounted, onUpdated等需要在setup()中使用。
   • <script setup> : 允许您直接使用生命周期钩子，如onMounted, onUpdated等，而不需要在setup()内部。

6. 模板引用:

   • 常规<script> : 使用setup()的返回值来定义模板引用，如ref或reactive对象的属性。
   • <script setup>: 可以直接在模板中使用定义的响应式变量，无需通过返回值引用。

使用<script setup>可以减少样板代码，使组件更加简洁。但是，它也有一些限制，比如不支持选项式API（如data, computed, watch等），并且某些高级用例可能需要在setup()内部实现。