vue2,3中的v-model

Vue2 与 Vue3 v-model 区别及实现原理分析

以下从 语法差异、实现原理 和 使用场景 三个角度深入分析，并提供代码示例。

---

一、Vue2 的 v-model 实现

1. 默认行为：

• 绑定属性： 隐式绑定组件的 value
• 监听事件： 隐式监听 input 事件
• 编译后代码：

  <input v-model="message">
  <!-- 编译为 ↓ -->
  <input :value="message" @input="message = $event.target.value">
  

2. 自定义组件：

• 需通过 model 选项自定义绑定属性和事件：

  // 子组件
  export default {
    model: {
      prop: 'checked',   // 绑定属性名
      event: 'change'    // 事件名
    },
    props: ['checked'],
    methods: {
      handleChange(e) {
        this.$emit('change', e.target.checked);
      }
    }
  }
  

3. 示例：

<!-- 父组件使用 -->
<CustomCheckbox v-model="isChecked" />

---

二、Vue3 的 v-model 改进

1. 默认行为变化：

• 绑定属性： modelValue
• 监听事件： update:modelValue
• 编译后代码：

  <input v-model="message">
  <!-- 编译为 ↓ -->
  <input 
    :modelValue="message" 
    @update:modelValue="newValue => message = newValue"
  >
  

2. 核心升级：

• 多 v-model 绑定： 可同时绑定多个数据

  <UserForm 
    v-model:name="userName"
    v-model:age="userAge"
  />
  

  // 子组件
  props: ['name', 'age'],
  emits: ['update:name', 'update:age']
  

3. 示例：

<!-- 子组件 CustomInput.vue -->
<template>
  <input 
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  >
</template>

<script setup>
defineProps(['modelValue']);
defineEmits(['update:modelValue']);
</script>

<!-- 父组件使用 -->
<CustomInput v-model="message" />

---

三、实现原理对比

特性	Vue2	Vue3
默认绑定属性	value	modelValue
默认事件	input	update:modelValue
多v-model支持	不支持，需.sync修饰符	原生支持
自定义配置	通过model选项配置	直接通过参数指定
代码简洁性	需额外配置	语法更统一、灵活

---

四、原理深度解析

Vue2 响应式流程：

1. 初始化阶段对数据进行劫持
2. 模板编译时，将 v-model 转换为 value 和 input 监听
3. 自定义组件的 model 选项在运行时动态修改绑定属性

Vue3 响应式流程：

1. 基于 Proxy 的响应式系统
2. 编译器将 v-model 分拆为 modelValue 和 update:modelValue
3. 多个v-model生成对应的 arg（如 v-model:title → title 和 update:title）

---

五、最佳实践建议

1. 表单元素： 优先使用原生 v-model
2. 组件通信：
   • Vue2 复杂场景使用 .sync + v-bind
   • Vue3 多数据流使用多 v-model
3. 自定义组件：

   // Vue3 组合式API
   const props = defineProps(['modelValue']);
   const emit = defineEmits(['update:modelValue']);
   

通过理解底层机制，可以更灵活地定制组件的数据流交互。