vue中vmodel实现原理

Vue 中 v-model 的实现原理

v-model 是 Vue 提供的一个语法糖，用于在表单元素或自定义组件上实现双向数据绑定。其本质是结合了 :value 绑定和 @input 事件监听。

表单元素上的实现

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

<input v-model="message">

等价于：

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

不同表单元素的实现细节略有差异：

• text 和 textarea：使用 value 属性和 input 事件。
• checkbox 和 radio：使用 checked 属性和 change 事件。
• select：使用 value 属性和 change 事件。

自定义组件上的实现

在自定义组件中使用 v-model 时，默认会利用 value prop 和 input 事件：

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

等价于：

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

从 Vue 2.2.0 开始，可以通过 model 选项修改默认的 prop 和事件名称：

export default {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: ['checked'],
  methods: {
    handleChange() {
      this.$emit('change', newValue)
    }
  }
}

Vue 3 中的变化

Vue 3 对 v-model 进行了改进：

• 默认使用 modelValue prop 和 update:modelValue 事件。
• 支持多个 v-model 绑定，如 v-model:title="title"。
• 移除 .sync 修饰符，其功能由多个 v-model 替代。

底层实现机制

Vue 的编译器会将 v-model 编译为对应的属性和事件绑定。例如：

<input v-model="message">

编译后的渲染函数类似：

h('input', {
  domProps: {
    value: message
  },
  on: {
    input: function($event) {
      message = $event.target.value
    }
  }
})

对于自定义组件，编译结果会使用组件定义的 prop 和事件。