vue-model实现原理
Vue v-model 的实现原理
Vue 的 v-model 是一个语法糖，本质上是结合了 value 属性和 input 事件的绑定。它主要用于表单元素（如 input、select、textarea）和自定义组件，实现双向数据绑定。
在原生表单元素上的实现
对于原生表单元素（如 input），v-model 会根据元素的类型自动绑定对应的属性和事件：
<input v-model="message">等价于：
<input
:value="message"
@input="message = $event.target.value"
>:value：将message的值绑定到input的value属性上。@input：监听input事件，当用户输入时，将输入的值赋给message。
在自定义组件上的实现
在自定义组件中，v-model 默认绑定的是 value 属性和 input 事件：
<custom-component v-model="message"></custom-component>等价于：
<custom-component
:value="message"
@input="message = $event"
></custom-component>- 父组件通过
:value将message传递给子组件。 - 子组件通过
$emit('input', newValue)触发事件，更新父组件的message。
自定义 v-model 的属性和事件
Vue 2.4+ 允许通过 model 选项自定义 v-model 绑定的属性和事件：
export default {
model: {
prop: 'checked', // 绑定的属性名
event: 'change' // 触发的事件名
},
props: ['checked'],
methods: {
handleChange() {
this.$emit('change', newValue);
}
}
}此时，v-model 会绑定 checked 属性和 change 事件。
Vue 3 中的变化
在 Vue 3 中，v-model 的默认行为有所调整：
- 默认绑定
modelValue属性和update:modelValue事件。 - 支持多个
v-model绑定，如v-model:title="title"。
<custom-component v-model="message"></custom-component>等价于：
<custom-component
:modelValue="message"
@update:modelValue="message = $event"
></custom-component>核心实现总结
- 数据绑定：
v-model将数据（如message）绑定到表单元素或组件的value（或自定义属性）上。 - 事件监听：监听
input（或自定义事件），在用户输入或组件内部变化时更新数据。 - 双向同步：通过属性和事件的结合，实现父子组件之间的双向数据流。
通过这种机制，v-model 简化了手动绑定属性和事件的操作，提供了一种简洁的双向数据绑定方式。
