【Vue知识点总结】Vue2与Vue3中的 v-model

一、v-model 的本质

v-model 是 Vue 框架中实现数据双向绑定的核心指令。

v-model 的实现机制

v-model 并非特殊语法，而是一个语法糖，其本质是 prop 绑定与 event 监听的组合。Vue 2 与 Vue 3 的主要区别在于这个组合的默认约定。

在 Vue2 中，v-model 的标准契约是使用 value 作为 prop，input 作为事件。

对于原生元素：

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

对于自定义组件，组件必须接收 value 并在需要更新时触发 input 事件。

<!-- 父组件 -->
<ChildComponent v-model="parentMsg" />
<!-- 等价于 -->
<ChildComponent :value="parentMsg" @input="parentMsg = $eve