vue双向实现
Vue 双向数据绑定的实现原理
Vue 的双向数据绑定主要通过 v-model 指令实现，其核心是结合了数据绑定和事件监听。以下是具体实现方式：
使用 v-model 指令
v-model 是语法糖，本质上是 :value 和 @input 的结合。例如在输入框中：
<input v-model="message">等价于：
<input :value="message" @input="message = $event.target.value">自定义组件实现双向绑定
在自定义组件中，可以通过 model 选项和 $emit 实现双向绑定：
- 父组件：使用
v-model绑定数据。
<custom-input v-model="message"></custom-input>- 子组件：通过
props接收值，并通过事件更新。
props: ['value'],
methods: {
updateValue(newValue) {
this.$emit('input', newValue);
}
}使用 .sync 修饰符
Vue 还支持 .sync 修饰符实现双向绑定，适用于多个 props 需要双向绑定的场景：
- 父组件：
<child-component :title.sync="pageTitle"></child-component>- 子组件：
this.$emit('update:title', newTitle);底层原理：数据劫持与发布订阅
Vue 2.x 使用 Object.defineProperty 实现数据劫持，监听数据变化：
Object.defineProperty(obj, key, {
get() {
return value;
},
set(newVal) {
if (newVal !== value) {
value = newVal;
dep.notify(); // 通知订阅者更新
}
}
});Vue 3.x 改用 Proxy 实现，支持更灵活的数据监听：
const proxy = new Proxy(obj, {
get(target, key) {
return Reflect.get(target, key);
},
set(target, key, value) {
Reflect.set(target, key, value);
triggerUpdate(); // 触发更新
return true;
}
});表单元素的双向绑定
对于不同类型的表单元素，v-model 的行为略有差异：
- 文本框：绑定
value属性和input事件。 - 复选框：绑定
checked属性和change事件。 - 单选按钮：绑定
checked属性和change事件。
注意事项
- 避免直接修改 props 中的数据，始终通过事件通知父组件更新。
- 在自定义组件中，可以通过
model选项自定义prop和event名称：
model: {
prop: 'checked',
event: 'change'
}
