v-model本质

v-model 本质

单向数据绑定（数据流向视图）：

:value="userName"

这行代码是 Vue.js 中的动态属性绑定语法（形式为 v-bind:value），它将输入框的 value 属性与 Vue 实例中名为 userName 的数据属性绑定起来，确保输入框显示的数据始终与 userName 的值同步。

事件监听与更新（视图流向数据）：

@input="userName = (<HTMLInputElement>$event.target).value"

这行代码是 Vue.js 中的事件监听器语法（简写形式为 v-on:input），它监听输入框的 input 事件。当用户在输入框内输入文本导致输入事件触发时，对应的事件处理器会执行，从而将当前输入框的值赋给 userName 数据属性，实现了数据的反向同步。

所以，v-model 就是上述这两步操作的语法糖，它简化了双向数据绑定的编写方式，使得开发者无需手动处理数据同步的细节。在实际的 Vue.js 源码中，v-model 会根据不同的表单元素类型（如 text、checkbox、radio、select 等）做出相应的行为调整，确保在各种复杂场景下仍能保持高效简洁的双向绑定功能。