Vue script setup 宏
Vue3 script setup 中常见编译期宏的职责边界，以及 defineProps、defineEmits、defineModel 之间的关系。
#tech / dev / frame
#resource / vue3
#type / synthesis
#status / growing
[!info] related notes
Vue script setup 宏
defineProps、defineEmits、defineModel 这些能力放在一起理解更合适，因为它们都不是普通运行时函数，而是 script setup 下的编译期宏。
一句话定义
script setup 宏是 Vue 在单文件组件编译阶段识别和转换的特殊语法入口，用来声明 props、emit、双向绑定等组件边界信息。
为什么这组能力要放在一起理解
- 它们都服务于组件接口声明
- 都依赖
script setup的编译期处理 - 看起来像函数，职责却更接近“组件声明语法”
几个最常见的宏
defineProps
- 声明组件接收哪些 props
- 本质上在声明输入边界
defineEmits
- 声明组件会发出哪些事件
- 本质上在声明输出边界
defineModel
- 把
v-model这类双向绑定入口写得更直接 - 本质上仍然是在组织 prop 和事件约定
应该怎么理解它们和运行时逻辑的区别
- 它们不是普通业务函数
- 不应该把它们理解成随时可调用的工具方法
- 更应该把它们看成组件接口的一部分声明语法
常见误区
- 以为这些宏和普通 Composition API 函数完全一样
- 只会背写法，不理解它们对应的组件边界
- 把
defineModel理解成全新的双向绑定机制，而不是对既有约定的更直接表达
最短记忆方式
defineProps 管输入，defineEmits 管输出，defineModel 管双向绑定入口。
面试要点
来自 vue-script-setup-macros-interview-question 的面试视角整理。
一句话回答
defineProps、defineEmits、defineModel 都是 script setup 下的编译期宏，用来声明组件输入、输出和双向绑定入口；它们看起来像函数，但更接近组件边界的声明语法。
最稳的回答主线
- 先说共同点：都是
script setup宏 - 再说职责分工：props 是输入，emits 是输出，model 是双向绑定入口
- 再说本质：它们不是普通业务函数，而是组件接口声明
- 最后补一句：理解边界比死记写法更重要
面试里容易加分的一句
如果只记 defineProps 怎么写，却没意识到它和 defineEmits、defineModel 一起构成了组件对外接口，那这题通常只能答到语法层。
常见追问
defineModel和v-model的关系是什么- 为什么说这些宏不是普通运行时函数
- 什么时候只用 props/emit，什么时候引入 model
最短记忆方式
它们不是业务函数，而是在声明组件的输入输出边界。