v-model 是 vue 中实现双向数据绑定的语法糖，其核心机制是结合 value 属性和 input 事件。1. 它通过将数据绑定到表单元素的 value 并监听 input 事件来更新数据，从而实现双向同步；2. 在自定义组件中，默认使用 value 和 input，但可通过 model 选项自定义 prop 和事件名；3. vue 3 支持多个 v-model，通过指定参数名实现多个值的双向绑定；4. 使用时应避免直接修改 props，而应通过触发事件通知父组件更新，以保持数据流清晰。理解这些原理有助于正确高效地使用 v-model 进行开发。
在 Vue 中，v-model 是实现双向数据绑定的一种便捷方式。它本质上是一个语法糖，结合了 value 属性和 input 事件，用于在表单元素（如 input、textarea）与数据之间建立同步关系。
基本原理：绑定 value + 触发 input
当你在一个 元素上使用 v-model=”message” 时，Vue 实际上做了两件事：
- 把 message 的值作为 value 绑定到输入框上；
- 监听输入框的 input 事件，并在触发时更新 message 的值。
也就是说，下面这段代码：
立即学习“前端免费学习笔记（深入）”；
<input v-model="message">
等价于：
<input :value="message" @input="message = $event.target.value">
这样就实现了“输入变化更新数据”、“数据变化更新输入”的双向绑定效果。
在组件中使用 v-model：自定义组件如何支持
在开发自定义组件时，如果你想让它也支持 v-model，需要注意以下几点：
- 默认情况下，v-model 会把 value 作为 prop 传递，并通过 input 事件来更新父级数据；
- 如果你想用别的名字而不是 value 和 input，可以在组件中使用 model 选项来自定义。
举个例子，如果你希望用 checked 和 change 来代替：
export default { model: { prop: 'checked', event: 'change' }, props: ['checked'] }
然后你就可以这样使用：
<my-checkbox v-model="isChecked"></my-checkbox>
这相当于：
<my-checkbox :checked="isChecked" @change="isChecked = $event"></my-checkbox>
多个 v-model？Vue 2 vs Vue 3
在 Vue 2 中，一个组件只能有一个 v-model，因为它是基于固定的 value 和 input 实现的。
而在 Vue 3 中，你可以给 v-model 指定参数名，从而实现多个双向绑定：
<my-component v-model:title="title" v-model:content="content">
这就相当于同时绑定了两个不同的值，并分别监听对应的 update:title 和 update:content 事件。
注意事项：避免直接修改 props
在自定义组件中，如果你接收了一个 value 或者自定义的 prop（比如 checked），不要直接修改这个 prop，例如：
this.checked = false // ❌ 不推荐
正确的做法是触发对应的事件来通知父组件更新数据，保持数据流清晰。比如：
this.$emit('change', false)
否则可能会导致状态混乱，调试困难。
基本上就这些。理解 v-model 的本质后，你会发现它并不复杂，但很容易在实际开发中忽略细节。
