vue v model 实现

Vue v-model 实现原理

Vue 的 v-model 是一个语法糖，用于在表单元素或组件上实现双向数据绑定。以下是其实现原理和具体用法：

表单元素上的实现

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

• input 和 textarea 元素：绑定 value 属性和 input 事件。
• checkbox 和 radio 元素：绑定 checked 属性和 change 事件。
• select 元素：绑定 value 属性和 change 事件。

示例代码：

<input v-model="message" />

等价于：

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

自定义组件上的实现

在自定义组件中，v-model 默认绑定 value prop 和 input 事件。可以通过 model 选项修改默认行为。

示例代码：

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

等价于：

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

自定义组件内部实现：

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

修改默认 prop 和事件

从 Vue 2.2.0 开始，可以在组件中通过 model 选项修改 v-model 绑定的 prop 和事件名称：

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

Vue 3 中的变化

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

• 默认绑定 modelValue prop 和 update:modelValue 事件。
• 支持多个 v-model 绑定。

示例代码：

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

等价于：

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

自定义组件内部实现：

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

多个 v-model 绑定

Vue 3 支持在单个组件上使用多个 v-model：

<user-name
  v-model:first-name="firstName"
  v-model:last-name="lastName"
/>

等价于：

<user-name
  :firstName="firstName"
  @update:firstName="firstName = $event"
  :lastName="lastName"
  @update:lastName="lastName = $event"
/>

总结

v-model 的核心是通过 prop 和事件实现双向绑定。在表单元素上自动处理属性和事件，在组件中则提供灵活的配置选项。Vue 3 进一步扩展了其功能，支持多个绑定和自定义命名。