Vue2中的v-model本质

在 Vue 2 中，v-model 是一个语法糖，它简化了在表单元素或组件上创建双向数据绑定的过程。其本质是结合了 v-bind（绑定属性）和 v-on（监听事件）两个指令的功能。

具体来说，在原生表单元素（如 <input>, <textarea> 和 <select>）上使用 v-model 时，Vue 实际上做了以下两件事：

1. Value 绑定：通过 v-bind:value="variable" 将变量的值绑定到表单元素的 value 属性上。
2. Input 事件监听：通过 v-on:input="variable = $event.target.value" 监听输入框的 input 事件，并在事件触发时更新绑定的变量。

例如，以下使用 v-model 的代码：

<input v-model="message" />

实际上是以下代码的简写形式：

<input :value="message" @input="message = $event.target.value" />

在自定义组件中使用 v-model 时，默认情况下会将一个 value prop 传递给组件，并期望该组件在内部通过 $emit('input', value) 来同步数据变化。不过，开发者可以通过修改 model 选项来自定义使用的 prop 和 event 名称。

从 Vue 2.2.0 开始，如果一个组件根元素自然地使用了 v-model 而不是通过 $emit 触发 'input' 事件来更新父组件的数据，那么你可以直接在组件内使用 model 选项来指定不同的 prop 和 event。

理解 v-model 的本质有助于更灵活地在表单元素和组件之间进行数据绑定，同时也为处理复杂的绑定逻辑提供了思路。