Vue v-model 原理解析

1、Vue v-model 简介

v-model 是 Vue 提供的语法糖，用于实现表单元素与数据的双向绑定，简化了手动绑定 value 和监听 input 事件的过程。

<!-- 等价写法 -->
<input :value="message" @input="message = $event.target.value">

2、工作原理

v-model 的底层实现包含两个关键机制。

1）属性绑定（v-bind:value）

将数据模型中的值绑定到表单元素的 value 属性，确保页面中显示的值始终与数据一致。

2）事件监听（@input）

自动监听表单元素的输入事件（如 input、change 等），当用户修改输入框内容时，Vue 会将新值同步回数据模型中，实现双向更新。

3、局限性

默认只能绑定名为 value 的属性。对于自定义组件，如需绑定其他 prop（例如 checked、selected 等），需配合 model 选项或在 Vue 3 中使用 emits 和 props 配置。

4、使用示例

<template>
  <input v-model="username" />
</template>

<script>
export default {
  data() {
    return {
      username: ''
    }
  }
}
</script>

实际上相当于：

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