vue中vmodel实现原理
Vue 中 v-model 的实现原理
v-model 是 Vue 提供的一个语法糖，用于在表单元素或自定义组件上实现双向数据绑定。其本质是结合了 :value 绑定和 @input 事件监听。
表单元素上的实现
对于原生表单元素（如 input、textarea、select），v-model 会根据元素类型自动生成对应的属性和事件：
<input v-model="message">等价于：
<input
:value="message"
@input="message = $event.target.value"
>不同表单元素的实现细节略有差异：
- text 和 textarea：使用
value属性和input事件。 - checkbox 和 radio：使用
checked属性和change事件。 - select：使用
value属性和change事件。
自定义组件上的实现
在自定义组件中使用 v-model 时，默认会利用 value prop 和 input 事件：
<custom-component v-model="message"></custom-component>等价于：
<custom-component
:value="message"
@input="message = $event"
></custom-component>从 Vue 2.2.0 开始，可以通过 model 选项修改默认的 prop 和事件名称：
export default {
model: {
prop: 'checked',
event: 'change'
},
props: ['checked'],
methods: {
handleChange() {
this.$emit('change', newValue)
}
}
}Vue 3 中的变化
Vue 3 对 v-model 进行了改进：
- 默认使用
modelValueprop 和update:modelValue事件。 - 支持多个 v-model 绑定，如
v-model:title="title"。 - 移除
.sync修饰符，其功能由多个 v-model 替代。
底层实现机制
Vue 的编译器会将 v-model 编译为对应的属性和事件绑定。例如：
<input v-model="message">编译后的渲染函数类似：
h('input', {
domProps: {
value: message
},
on: {
input: function($event) {
message = $event.target.value
}
}
})对于自定义组件，编译结果会使用组件定义的 prop 和事件。
