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 事件。可以通过 model 选项修改默认行为：

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

使用方式：

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

Vue 2 和 Vue 3 的区别

Vue 2:

• 默认使用 value 属性和 input 事件。
• 通过 model 选项自定义属性和事件名。

Vue 3:

• 默认使用 modelValue 属性和 update:modelValue 事件。
• 通过 v-model:arg 支持多个双向绑定：

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

实现自定义 v-model

在 Vue 3 中，可以通过 props 和 emit 实现自定义 v-model：

export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  template: `
    <input
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)"
    >
  `
}

修饰符支持

v-model 支持修饰符，如 .lazy、.number、.trim：

• .lazy：将 input 事件改为 change 事件。
• .number：将输入值转为数字。
• .trim：去除输入值首尾空格。

实现原理是通过解析修饰符并调整事件监听或值处理逻辑。