vue v model的实现

Vue v-model 的实现原理

Vue 的 v-model 是一个语法糖，用于在表单元素或组件上实现双向数据绑定。其核心是通过 value 属性和 input 事件的组合实现数据同步。

基本实现（以 input 元素为例）

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

等价于：

<input v-model="message">

在自定义组件中的实现

自定义组件中，v-model 默认利用 value 属性和 input 事件实现双向绑定。以下是自定义组件的实现方式：

<template>
  <input 
    :value="value" 
    @input="$emit('input', $event.target.value)"
  >
</template>

<script>
export default {
  props: ['value']
}
</script>

使用 model 选项自定义

Vue 2.2.0+ 支持通过 model 选项修改默认的 v-model 绑定属性和事件：

export default {
  model: {
    prop: 'checked',  // 修改默认的 value 属性
    event: 'change'   // 修改默认的 input 事件
  },
  props: ['checked']
}

Vue 3 中的变化

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

• 默认使用 modelValue 作为 prop 名
• 默认使用 update:modelValue 作为事件名

自定义组件示例（Vue 3）

<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  >
</template>

<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue']
}
</script>

多个 v-model 绑定

Vue 3 支持在单个组件上绑定多个 v-model：

<CustomComponent 
  v-model:first="firstValue"
  v-model:second="secondValue"
/>

组件内部实现：

export default {
  props: {
    first: String,
    second: String
  },
  emits: ['update:first', 'update:second']
}

修饰符处理

v-model 支持修饰符（如 .lazy, .number），组件可以通过 modelModifiers prop 访问这些修饰符：

export default {
  props: {
    modelValue: String,
    modelModifiers: {
      default: () => ({})
    }
  },
  created() {
    console.log(this.modelModifiers) // 例如 { capitalize: true }
  }
}

底层原理总结

1. 编译阶段将 v-model 转换为 value prop 和 input 事件监听（Vue 2）或 modelValue prop 和 update:modelValue 事件（Vue 3）
2. 表单元素输入时触发事件，更新父组件数据
3. 父组件数据变化时，通过 prop 向下传递新值
4. 自定义组件通过 $emit 触发事件通知父组件更新