Vue script setup 扩展宏
Vue3 script setup 中 withDefaults、defineExpose、defineSlots 的职责边界，以及它们和组件接口声明的关系。
#tech / dev / frame
#resource / vue3
#type / synthesis
#status / growing
[!info] related notes
Vue script setup 扩展宏
withDefaults、defineExpose、defineSlots 适合放在一起理解，因为它们都属于 script setup 下常见但更容易被忽略的接口声明补充能力。
一句话定义
这组扩展宏分别用来补默认 props 值、显式暴露组件实例能力，以及声明插槽类型边界，它们共同完善了 script setup 下组件接口的表达方式。
为什么要把它们放在一起理解
- 它们都不是普通业务逻辑函数
- 都在补组件接口层的信息
- 都比
defineProps、defineEmits更偏“细化接口边界”
三个常见入口
withDefaults
- 给
defineProps的类型声明补默认值 - 重点在于把可选 prop 和默认值表达得更清晰
defineExpose
- 显式声明组件实例对外暴露什么能力
- 重点在于控制父组件通过模板 ref 能访问的边界
defineSlots
- 声明插槽的类型结构
- 重点在于让插槽接口更明确，尤其在 TypeScript 场景下更有价值
应该怎么理解它们的共同点
- 都是在描述组件接口，而不是业务运行流程
- 都更接近“声明边界”而不是“处理逻辑”
- 理解它们时，先问组件对外暴露了什么，而不是先问语法怎么写
常见误区
- 把
withDefaults当成普通运行时赋值工具 - 把
defineExpose理解成“随便把内部方法暴露出去” - 只在意
defineSlots的类型写法，不理解插槽本身也是组件接口的一部分
最短记忆方式
withDefaults 补默认值，defineExpose 控暴露面，defineSlots 声明插槽边界。
面试要点
来自 vue-script-setup-advanced-macros-interview-question 的面试视角整理。
一句话回答
withDefaults、defineExpose、defineSlots 都是在 script setup 下补充组件接口边界的宏：一个补 props 默认值，一个控制组件实例对外暴露面，一个声明插槽接口结构。它们都不像普通业务函数，更像组件声明语法的一部分。
最稳的回答主线
- 先说共同点：都是
script setup下的接口补充宏 - 再分别说：默认值、暴露面、插槽边界
- 再强调本质：它们在定义组件对外接口，而不是处理业务流程
- 最后补一句：理解对外边界，比背语法更重要
面试里容易加分的一句
如果把组件看成一个可复用模块，那这些宏本质上都在回答同一个问题：这个模块对外到底接收什么、暴露什么、允许怎样的插槽协作。
常见追问
withDefaults和直接在运行时兜底有什么区别- 为什么
defineExpose不该滥用 defineSlots在什么场景下最有价值
最短记忆方式
它们都在补组件接口，不是在写业务流程。