<script setup> 是 Vue3 中的一个语法糖，
并不是 JavaScript 的原生语法，而是 Vue 特有的单文件组件（SFC）语法  
它用于简化 Vue 组件的编写方式，尤其是在使用 Composition API 时  

核心特点包括：
自动将顶层变量和函数暴露给模板  
不需要显式地使用 setup() 函数  
支持 TypeScript 和更简洁的语法  
它依赖于 Vue 的编译器，在编译阶段会被转换为标准的 JavaScript 代码  



<script setup> 和普通 JavaScript 的区别
普通 JavaScript：
在 Vue 组件中，通常需要使用 setup() 函数来定义组件的逻辑，并通过 return 将数据和方法暴露给模板  

<script>
export default {
  setup() {
    const message = 'Hello, Vue 3!';
    return {
      message
    };
  }
};
</script>


<script setup>：
使用 <script setup> 时，所有顶层变量和函数都会自动暴露给模板，无需显式返回  

vue
复制
<script setup>
const message = 'Hello, Vue 3!';
</script>

<template>
  <div>{{ message }}</div>
</template>



<script setup> 的核心特性
自动暴露顶层变量：在 <script setup> 中声明的变量、函数、导入的模块等都会自动暴露给模板  

更简洁的语法：不需要写 setup() 函数和 return 语句  

支持 TypeScript：可以直接在 <script setup> 中使用 TypeScript 的类型注解  

更好的工具支持：Vue 官方工具（如 Volar）对 <script setup> 提供了更好的支持  


<script setup> 的常见用法

定义响应式数据：
<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>

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


使用生命周期钩子：
<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  console.log('Component mounted!');
});
</script>



导入和使用组件：
<script setup>
import MyComponent from './MyComponent.vue';
</script>

<template>
  <MyComponent />
</template>



使用计算属性：
<script setup>
import { computed, ref } from 'vue';
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
</script>

<template>
  <div>{{ doubleCount }}</div>
</template>



<script setup> 的优势
更少的样板代码：减少了 setup() 函数和 return 语句的冗余代码  
更直观的代码结构：逻辑更集中，易于阅读和维护  
更好的性能：Vue 编译器会对 <script setup> 进行优化，生成更高效的代码  



<script setup> 的限制
仅适用于 Vue 3：<script setup> 是 Vue 3 的特性，Vue 2 不支持  
需要工具支持：虽然现代工具（如 Vite、Vue CLI）都支持 <script setup>，但在某些旧工具中可能需要额外配置