vue实现双向数据绑定的原理

Vue 双向数据绑定的原理

Vue 实现双向数据绑定的核心是通过 数据劫持 和 发布-订阅模式 结合实现的。主要依赖 Object.defineProperty（Vue 2.x）或 Proxy（Vue 3.x）来监听数据变化，并通过 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) {
    // 依赖收集
    return Reflect.get(target, key);
  },
  set(target, key, value) {
    // 触发更新
    const result = Reflect.set(target, key, value);
    dep.notify();
    return result;
  }
});

依赖收集与发布订阅

• Dep（依赖管理器）：每个响应式属性关联一个 Dep 实例，用于存储依赖（Watcher）。
• Watcher（观察者）：当数据变化时，Dep 会通知所有 Watcher 更新视图。

双向绑定的实现（v-model）

v-model 是语法糖，本质上是 :value 和 @input 的组合：

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

具体流程

1. 初始化阶段：Vue 遍历 data 对象，通过数据劫持监听所有属性。
2. 模板编译：解析模板中的指令（如 v-model），创建对应的 Watcher。
3. 依赖收集：渲染时触发 getter，将 Watcher 添加到当前属性的 Dep 中。
4. 数据更新：当数据变化时，setter 触发 Dep 通知所有 Watcher 重新渲染视图。

与单向数据流的区别

Vue 的双向绑定实际上是单向数据流+事件监听的封装：

• 数据到视图：通过响应式系统自动更新。
• 视图到数据：通过事件（如 @input）手动更新数据。

注意事项

• Vue 2.x 中无法检测到对象属性的添加或删除，需使用 Vue.set/Vue.delete。
• 数组变异方法（如 push、pop）被重写以触发更新，但直接通过索引修改需用 Vue.set。