script setup语法糖的优势

Tue, 04 Mar 2025 07:00:31 +0000

考察点分析

该题目主要考察以下核心能力维度：

具体技术评估点：

编译器转换 > 自动暴露机制 > 编译器宏支持 > 类型推导优化

编译时转换：<script setup>在编译阶段会被转换为标准<script>组件格式。例如：
```
 // 源码
<script setup>
const count = ref(0)
</script>

// 编译后
export default {
 setup() {
 const count = ref(0)
 return { count } // 自动收集顶层变量
 }
}
 
```
编译器通过AST分析识别顶层变量，自动生成return语句暴露变量。
自动暴露机制：
- 仅暴露顶层声明的变量/函数
- 非顶层变量（如setup函数内部声明的变量）不会被暴露
- 通过expose编译器选项可精确控制暴露内容

编译器宏：

 // 源码
defineProps({ msg: String }) 

// 编译后
export default {
 props: { msg: String },
 // 自动注入setup函数
}

宏在编译阶段被解析为组件选项，实现类型安全的props/emits声明。