v-model 是 Vue 将 v-bind 和 v-on 封装的语法糖，实现表单与数据双向同步；对不同元素自动绑定对应属性和事件，支持自定义组件、命名参数及 .lazy/.number/.trim 等修饰符。
v-model 不是魔法，它是 Vue 把 v-bind 和 v-on 组合封装后的语法糖，核心目标是让表单元素和数据自动同步——改输入框，变量跟着变；改变量，输入框也立刻更新。
它在不同表单元素上怎么工作？
Vue 会根据元素类型自动匹配合适的属性和事件：
-
文本类（
input[type="text"]、textarea）：绑定:value+ 监听@input事件 -
复选框（
checkbox）：绑定:checked+ 监听@change事件；单个时对应布尔值，多个时绑定数组 -
单选按钮（
radio）：绑定:value（注意必须显式写 value）+ 监听@change事件 -
下拉选择（
select）：绑定:value+ 监听@change事件；多选时需加multiple，绑定数组
v-model 在自定义组件里怎么用？
Vue 3 中，v-model 默认对应 modelValue prop 和 update:modelValue 事件：
- 父组件写法：
<MyInput v-model="text" /> - 子组件接收：
defineProps({ modelValue: String }) - 子组件触发更新：
emit('update:modelValue', newValue) - 支持命名参数，比如
v-model:title="pageTitle"，等价于绑定titleprop 并监听update:title
常用修饰符有哪些？它们解决什么问题？
修饰符以点号（.）接在 v-model 后面，用于微调输入行为：
立即学习“前端免费学习笔记（深入）”；
-
.lazy：把触发时机从
@input改为@change，适合只在失焦或回车后才更新数据 -
.number：自动将输入值转为数字（空字符串转为
NaN），避免字符串拼接问题 - .trim：自动去除首尾空格，防止用户误输空格导致校验失败
-
自定义修饰符：比如
v-model.capitalize，可在子组件中通过props.modelModifiers判断并处理（如首字母大写）
要注意的细节
v-model 会忽略 HTML 中 value、checked、selected 等初始 attribute，始终以 Vue 数据为唯一来源。所以表单默认值必须在 data 或 ref 中声明，不能靠 HTML 属性硬写。
对于中文等需要输入法组合文字的场景，@input 在组合过程中不触发，若需实时响应（如搜索建议），应额外监听 @compositionstart 和 @compositionend。
