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"
>

在自定义组件上的实现

在自定义组件中，v-model 默认会利用 value 属性和 input 事件实现双向绑定。例如：

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

等价于：

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

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

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

自定义 v-model 的 prop 和 event

从 Vue 2.2.0 开始，可以在组件中通过 model 选项修改默认的 prop 和 event：

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

这样使用时：

<my-checkbox v-model="isChecked"></my-checkbox>

Vue 3 中的变化

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

• 默认使用 modelValue 作为 prop 而不是 value
• 默认使用 update:modelValue 作为事件而不是 input

例如：

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

等价于：

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

可以通过参数支持多个 v-model 绑定：

<custom-component 
  v-model:first="firstName"
  v-model:last="lastName"
></custom-component>

实现原理总结

1. 对于原生元素，v-model 是 :value 和 @input 的语法糖
2. 对于组件，默认使用 value prop 和 input 事件（Vue 2）
3. 可以通过 model 选项自定义 prop 和 event 名称
4. Vue 3 中改为使用 modelValue 和 update:modelValue
5. Vue 3 支持多个 v-model 绑定