vue v model实现

Vue v-model 实现原理

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

在表单元素上的实现

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

<input v-model="message">

等价于：

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

• :value 将数据绑定到元素的 value 属性。
• @input 监听输入事件，更新数据。

在自定义组件上的实现

对于自定义组件，v-model 默认使用 value 属性和 input 事件：

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

等价于：

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

组件内部需要通过 props 接收 value，并在需要更新时触发 input 事件：

props: ['value'],
methods: {
  updateValue(newValue) {
    this.$emit('input', newValue);
  }
}

自定义 v-model 的属性和事件

从 Vue 2.2.0 开始，可以通过 model 选项自定义 v-model 的属性和事件：

export default {
  model: {
    prop: 'checked',  // 使用 checked 属性代替 value
    event: 'change'   // 使用 change 事件代替 input
  },
  props: ['checked'],
  methods: {
    handleChange() {
      this.$emit('change', newValue);
    }
  }
}

Vue 3 中的变化

在 Vue 3 中，v-model 的默认行为有所调整：

• 默认使用 modelValue 属性和 update:modelValue 事件。
• 支持多个 v-model 绑定，如 v-model:title="title"。

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

等价于：

<custom-component 
  :modelValue="message" 
  @update:modelValue="message = $event"
></custom-component>

组件内部实现：

props: ['modelValue'],
emits: ['update:modelValue'],
methods: {
  updateValue(newValue) {
    this.$emit('update:modelValue', newValue);
  }
}

总结

v-model 的核心是通过属性和事件的组合实现双向绑定。在表单元素中自动适配原生行为，在组件中可通过 model 选项（Vue 2）或默认规则（Vue 3）灵活配置。理解其实现原理有助于在需要时自定义绑定逻辑。