vue受控实现原理
Vue 受控组件的实现原理
Vue 中的受控组件通常指表单元素（如 input、select 等）的值由 Vue 的数据状态（如 v-model 绑定的数据）控制，而非由 DOM 自身管理。其核心原理基于双向数据绑定和事件监听。
数据绑定与更新
通过 v-model 指令，Vue 将表单元素的值与组件的数据属性动态绑定。例如：
<input v-model="message">等价于：
<input :value="message" @input="message = $event.target.value">:value="message"将数据message绑定到输入框的value属性，实现数据到视图的同步。@input="message = $event.target.value"监听输入事件，将用户输入的值更新到数据message，实现视图到数据的同步。
底层机制
-
响应式系统
Vue 通过Object.defineProperty或 Proxy 监听数据属性的变化。当message被修改时，触发依赖更新，重新渲染相关 DOM。 -
事件监听
表单元素触发input或change事件时，Vue 捕获事件并更新对应的数据属性，从而触发响应式系统的重新渲染。 -
修饰符支持
v-model支持修饰符（如.lazy、.number、.trim），通过调整事件监听逻辑或值处理方式实现特定功能。例如：.lazy将input事件改为change事件，延迟更新。.number将输入值转为数字类型。
自定义受控组件
对于自定义组件，v-model 默认绑定 value 属性和 input 事件。可通过 model 选项修改绑定属性和事件名：
export default {
model: {
prop: 'checked',
event: 'change'
},
props: ['checked']
}此时 v-model 会绑定 checked 属性和 change 事件。
与 React 受控组件的区别
- Vue：通过
v-model自动处理双向绑定，开发者无需手动实现事件处理和数据更新。 - React：需显式定义
value和onChange，手动更新状态。
