vue v model 实现原理

Vue v-model 实现原理

v-model 是 Vue 提供的语法糖，用于在表单元素或自定义组件上实现双向数据绑定。其本质是结合 value 属性和 input 事件的封装。

表单元素上的 v-model

在原生表单元素（如 input、textarea、select）上，v-model 会根据元素类型自动绑定对应的属性和事件：

• 文本输入框（input type="text"）
  绑定 value 属性和 input 事件：

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

  等价于：

  <input v-model="message">

• 复选框（checkbox）
  绑定 checked 属性和 change 事件：

  <input 
    type="checkbox" 
    :checked="isChecked" 
    @change="isChecked = $event.target.checked"
  >

• 单选框（radio）
  绑定 checked 属性和 change 事件：

  <input 
    type="radio" 
    :checked="selected === option" 
    @change="selected = option"
  >

自定义组件上的 v-model

在自定义组件中，v-model 默认绑定 value 属性和 input 事件。组件内部需通过 props 接收 value，并通过 $emit 触发 input 事件：

<custom-component v-model="data"></custom-component>

等价于：

<custom-component :value="data" @input="data = $event"></custom-component>

组件实现示例：

Vue.component('custom-component', {
  props: ['value'],
  template: `
    <input 
      :value="value" 
      @input="$emit('input', $event.target.value)"
    >
  `
})

Vue 2 与 Vue 3 的区别

• Vue 2
  默认使用 value 属性和 input 事件。可通过 model 选项修改：

  model: {
    prop: 'checked',
    event: 'change'
  }

• Vue 3
  默认使用 modelValue 属性和 update:modelValue 事件。支持多个 v-model 绑定：

  <custom-component v-model:title="title" v-model:content="content"></custom-component>

  对应组件需声明：

  props: ['title', 'content'],
  emits: ['update:title', 'update:content']

底层实现

编译阶段，v-model 会被转换为属性和事件的组合。例如：

<input v-model="message">

编译后：

h('input', {
  domProps: { value: message },
  on: { input: e => { message = e.target.value } }
})