vue中vmodel实现原理
Vue中v-model的实现原理
Vue的v-model是一个语法糖，用于在表单元素或自定义组件上实现双向数据绑定。其本质是结合value属性和input事件的封装。
在表单元素上的实现
对于原生表单元素（如input、textarea、select），v-model会根据元素类型自动绑定对应的属性和事件：
<input v-model="message">编译后的代码相当于：
<input
:value="message"
@input="message = $event.target.value"
>:value将数据从Vue实例绑定到输入元素的value属性。@input监听输入事件，当用户输入时更新Vue实例中的数据。
在自定义组件上的实现
对于自定义组件，v-model默认会利用value属性和input事件：
<custom-component v-model="message"></custom-component>等价于：
<custom-component
:value="message"
@input="message = $event"
></custom-component>组件内部需要通过props接收value，并在需要更新时触发input事件：
props: ['value'],
methods: {
updateValue(newValue) {
this.$emit('input', newValue);
}
}自定义v-model的配置
Vue 2.2.0+允许通过组件的model选项自定义v-model的属性和事件：
export default {
model: {
prop: 'checked', // 使用checked作为prop
event: 'change' // 使用change作为事件
},
props: ['checked']
}Vue 3中的变化
Vue 3对v-model进行了改进：
- 默认使用
modelValue作为prop，update:modelValue作为事件。 - 支持多个
v-model绑定，如v-model:title="pageTitle"。 - 移除
.sync修饰符，其功能由v-model的参数替代。
底层原理
在编译阶段，Vue的模板编译器会将v-model转换为对应的属性和事件绑定。运行时通过数据劫持（Object.defineProperty或Proxy）实现响应式更新，当数据变化时更新视图，当视图输入时更新数据。
