[!info] related notes

• 所属 MOC: Vue MOC
• 相关概念: vue-v-model, Vue中的props和emit, vue-script-setup-macros
• 面试问法: vue-define-model-interview-question, vue-v-model-interview-question

Vue defineModel

defineModel 最容易被误解成“Vue 又造了一套新的双向绑定机制”，但它更准确的角色，是把已有的 v-model 约定在 script setup 里写得更直接。

一句话定义

defineModel 是 script setup 下用来声明双向绑定入口的编译期宏，它本质上没有脱离 v-model 背后的 props + emit 约定，只是把这条约定表达得更顺手。

为什么它值得单独理解

• 它经常和 v-model 一起出现
• 又经常被误当成“新的状态共享方式”
• 实际上它只是组件接口声明的一种更直接写法

它和 v-model 的关系

• v-model 是模板层使用的双向绑定入口
• defineModel 是组件实现层声明这条入口的方式
• 两者讨论的是同一套约定的两个侧面

它和 props/emit 的关系

• defineModel 没有绕开单向数据流
• 父组件仍然持有状态
• 子组件仍然是在发出更新意图
• 只是以前手写的 prop + update 事件约定，现在可以被更直接地声明

常见误区

• 把 defineModel 理解成组件内部可以直接改父状态
• 以为有了它就不需要理解 v-model 的本质
• 只会记语法，不理解它和组件接口边界的关系

最短记忆方式

defineModel 不是新机制，而是把 v-model 背后的老约定写得更直接。

面试要点

来自 vue-define-model-interview-question 的面试视角整理。

一句话回答

v-model 是模板层的双向绑定入口，defineModel 是 script setup 下声明这条入口的实现写法，而它们本质上仍然站在 props + emit 的约定之上。也就是说，defineModel 不是新的数据流机制，只是让旧约定写起来更直接。

最稳的回答主线

• 先说 v-model：模板层使用方式
• 再说 defineModel：组件实现层声明方式
• 再说本质：两者背后仍然是 prop 输入和更新事件输出
• 最后强调：它没有打破单向数据流，只是让约定表达更集中

面试里容易加分的一句

如果把 defineModel 单独背成一个“新 API”，这题很容易答浅；更好的答法是说明它其实只是把 v-model 背后的接口约定直接提到了组件声明层。

常见追问

• 为什么 defineModel 不等于直接双向改父数据
• 它和手写 props + emit 有什么取舍
• 什么场景下仍然更适合显式写 props/emit

最短记忆方式

v-model 是用法，defineModel 是声明方式，底层还是 props + emit。

Related notes

• Vue MOC
• Vue中的props和emit