v-model原理

v-model其实是一个语法糖，他背后的本质上是包含两个操作

v-bind绑定一个value属性
v-on指令给当前元素绑定input事件

v-model 是 Vue.js 中实现双向数据绑定的语法糖，它的原理是 结合了 prop 和事件（event）机制，来实现父组件与子组件之间的数据联动。不同版本的 Vue（2.x 和 3.x）在实现细节上略有不同，但核心思想一致。

🔧 Vue 2 中的 v-model 原理

在 Vue 2 中，v-model 实际上是：

v-model="value"

等价于：

:value="value" 
@input="value = $event"

✨ 原理解析

:value=“value” 将父组件的数据通过 props 传给子组件。

子组件内部通过 this.$emit(‘input’, newValue) 向父组件发送更新。

父组件监听 input 事件，更新自身的 value。
示例：
父组件：

<MyInput v-model="message" />

子组件 MyInput.vue：

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

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

⚙️ Vue 3 中的 v-model 原理

Vue 3 对 v-model 做了增强，支持多个 v-model 绑定，并允许自定义绑定字段名。

默认行为仍是：

v-model="value"

等价于：

:modelValue="value" 
@update:modelValue="value = $event"

✨ 原理解析
:modelValue=“value” 表示将 value 作为 prop 传给子组件。
子组件通过 $emit(‘update:modelValue’, newValue) 通知父组件更新。
示例：
父组件：

<MyInput v-model="message" />

子组件 MyInput.vue：

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

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

🧠 自定义 v-model 参数（Vue 3 新特性）

<MyInput v-model:title="bookTitle" />

等价于：

:title="bookTitle"
@update:title="bookTitle = $event"

✅ 总结