script setup 在 Vue 3 中的核心作用及具体实现方式

 

​​一、核心作用​​

1. ​​简化 Composition API 语法​​

• ​​自动暴露顶层变量​​：无需手动通过 return 暴露属性或方法，直接声明即可被模板使用。

  <script setup>
  const count = ref(0); // 自动暴露给模板
  </script>
  <template><p>{{ count }}</p>
  </template>

• ​​省略 setup 函数定义​​：直接编写顶层代码，减少样板代码量。

2. ​​自动注册组件与指令​​

• ​​组件自动注册​​：导入的组件无需在 components 选项中声明，直接使用。

  <script setup>
  import Child from './Child.vue'; // 自动注册
  </script>
  <template><Child /> <!-- 直接使用 -->
  </template>

• ​​指令自动支持​​：全局指令（如 v-model）可直接使用，本地指令需符合命名规范（如 vMyDirective）。

3. ​​增强 TypeScript 支持​​

• ​​类型推断​​：直接声明变量类型，无需在 props 或 emits 中重复定义。

  <script setup lang="ts">
  const props = defineProps<{ msg: string }>(); // 类型自动推断
  </script>

• ​​类型安全的 Props/Emit​​：通过 defineProps 和 defineEmits 实现强类型校验。

4. ​​优化生命周期钩子​​

• ​​直接调用生命周期函数​​：无需在 setup() 中注册，代码更简洁。

  <script setup>
  import { onMounted } from 'vue';
  onMounted(() => { console.log('Mounted!'); });
  </script>

5. ​​逻辑复用与组合​​

• ​​组合式 API 原生支持​​：直接使用 ref、reactive、computed 等，逻辑更集中。
• ​​自定义 Composable 函数​​：封装可复用逻辑（如 useFetch），提升代码模块化。

6. ​​性能优化​​

• ​​编译时优化​​：模板编译为与 <script setup> 同一作用域的渲染函数，减少运行时代理开销。
• ​​减少中间层​​：避免传统 setup() 的返回对象代理，直接绑定顶层变量。

---

​​二、对比传统写法的优势​​

​​场景​​	​​传统 Composition API​​	​​<script setup>​​
​​变量暴露​​	需手动 return	自动暴露，无需 return
​​组件注册​​	需在 components 中声明	自动注册
​​类型支持​​	需手动定义接口	编译器自动推断类型
​​生命周期钩子​​	需通过 setup() 注册	直接调用（如 onMounted）
​​逻辑复用​​	依赖 mixins 或高阶组件	原生支持 Composable 函数

---

​​三、典型使用场景​​

1. ​​新项目开发​​
   • 快速搭建组件结构，减少样板代码。
2. ​​复杂组件逻辑​​
   • 通过顶层绑定和组合式 API 集中管理状态。
3. ​​TypeScript 项目​​
   • 利用类型推断提升代码健壮性。
4. ​​组件库开发​​
   • 简化 API 设计，降低用户学习成本。

---

​​四、注意事项​​

• ​​变量私有化​​：以下划线开头的变量默认不暴露（如 _privateVar）。
• ​​与普通 <script> 混合​​：若需使用传统选项（如 inheritAttrs），需在普通 <script> 中声明。
• ​​SSR 兼容性​​：需配合 vue-server-renderer 的特定配置。

---

​​总结​​

<script setup> 通过 ​​编译时语法糖​​ 和 ​​顶层绑定机制​​，解决了传统 Composition API 的冗余代码问题，同时提升了类型支持和运行时性能。它是 Vue 3 中编写组件的 ​​推荐方式​​，尤其适合追求代码简洁性和开发效率的场景。