vue v model 实现原理

Vue v-model 实现原理

v-model 是 Vue 中用于实现表单元素和数据双向绑定的指令。其本质是一个语法糖，结合了 :value 绑定和 @input 事件监听。

基本实现机制

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

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

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

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

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

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

  <input 
    type="radio" 
    :checked="selectedOption === value" 
    @change="selectedOption = value" 
  />

自定义组件中的 v-model

在 Vue 2.x 中，自定义组件默认通过 value prop 和 input 事件实现 v-model：

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

在 Vue 3.x 中，可以通过 modelValue prop 和 update:modelValue 事件实现：

app.component('custom-input', {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  template: `
    <input 
      :value="modelValue" 
      @input="$emit('update:modelValue', $event.target.value)" 
    />
  `
});

底层原理

1. 编译阶段
   Vue 模板编译器会将 v-model 转换为对应的 :value 和 @input（或其他事件）的组合。

2. 运行时处理
   根据元素类型动态绑定对应的属性和事件，确保数据变化能同步到视图，视图输入能同步到数据。

3. 自定义组件扩展
   支持通过 model 选项（Vue 2.x）或直接定义 prop/event（Vue 3.x）实现自定义 v-model 逻辑。