v-model 是 v-bind 和 v-on 的语法糖，实现表单双向绑定；根据元素类型自动适配行为，支持 .lazy/.number/.trim 修饰符；在自定义组件中 Vue 3 默认使用 modelValue prop 和 update:modelValue 事件。
v-model 是 Vue 模板中实现表单双向绑定最直接的方式，它不是黑箱魔法，而是 v-bind 和 v-on 的语法糖组合——数据自动同步，代码却更简洁。
基础用法：一行指令替代手动赋值+监听
对普通文本输入框，v-model 会自动完成两件事：
- 把数据渲染为 input 的当前值（等价于
:value="message"） - 监听用户输入，实时把新值写回变量（等价于
@input="message = $event.target.value"）
所以：<input v-model="message"> 和手动写绑定+事件效果完全一致，但不用重复处理 DOM 事件细节。
不同表单元素的绑定逻辑有差异
v-model 行为会根据元素类型自动适配语义，不是千篇一律地读取 target.value：
立即学习“前端免费学习笔记（深入）”；
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
-
textarea：和 text input 一样，绑定字符串，内容写在标签内会被忽略（应通过
v-model控制） -
checkbox（单个）：绑定布尔值，勾选即
true，取消即false -
checkbox（多个）：绑定数组，每个选项的
value被选中时自动加入/移出该数组 -
radio：多个共享同一个
v-model，由各自的value决定哪个被选中 -
select（单选）：绑定的是
option的value值，不是显示文字 -
select（多选）：需加
multiple属性，v-model绑定数组
修饰符让行为更贴合业务场景
点号后加修饰符，可悄无声息地调整同步时机或值类型：
-
.lazy：从input事件改为change事件，即失焦才更新（适合搜索框防抖前的简单延迟） -
.number：自动将输入值转为数字（空字符串转为NaN，非数字字符串也转NaN） -
.trim：自动去除首尾空格
多个修饰符可连用，如 v-model.number.trim。
自定义组件上使用 v-model
Vue 3 中默认使用 modelValue prop 和 update:modelValue 事件：
- 父组件写：
<MyInput v-model="searchText" /> - 子组件声明：
defineProps({ modelValue: String })，并defineEmits(['update:modelValue']) - 内部触发更新：
$emit('update:modelValue', newValue)
Vue 2 则默认用 value prop 和 input 事件；也可通过 model 选项自定义 key 和事件名。
