vue实现双向绑定的是

Vue 双向绑定实现原理

Vue 实现双向绑定的核心机制是数据劫持结合发布-订阅模式，主要通过 v-model 指令实现。以下是关键实现细节：

数据劫持（响应式系统）

Vue 2.x 使用 Object.defineProperty 劫持对象属性的 getter 和 setter，在数据变化时触发视图更新：

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) {
    track(target, key); // 依赖收集
    return Reflect.get(target, key);
  },
  set(target, key, value) {
    Reflect.set(target, key, value);
    trigger(target, key); // 触发更新
  }
});

模板编译

模板中的 v-model 会被编译为以下逻辑：

• 将数据绑定到表单元素的 value 属性（:value）
• 监听表单的 input 事件（@input），事件触发时更新数据

实现双向绑定的两种方式

1. v-model 指令

   <input v-model="message">
   <!-- 等价于 -->
   <input :value="message" @input="message = $event.target.value">

2. 自定义组件实现 需在组件内显式定义 model 选项：

   export default {
   model: {
    prop: 'value',  // 绑定的属性名
    event: 'input'  // 触发的事件名
   },
   props: ['value']
   }

不同表单元素的处理

• 文本输入框：绑定 value + input 事件
• 复选框：绑定 checked + change 事件
• 单选按钮：绑定 checked + change 事件
• 下拉选择框：绑定 value + change 事件

注意事项

• Vue 2.x 中无法检测到对象属性的添加或删除，需使用 Vue.set
• 数组变异方法（如 push/pop）会被重写以触发更新
• Vue 3.x 的 Proxy 可原生支持动态新增属性