当前位置：首页 > VUE

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

2026-02-25 14:40:10VUE

Vue 双向数据绑定的原理

Vue 的双向数据绑定主要通过 数据劫持 和 发布-订阅模式 实现，核心是 Object.defineProperty（Vue 2.x）或 Proxy（Vue 3.x）。以下是具体实现机制：

数据劫持（响应式系统）

Vue 通过劫持对象的属性，在属性被访问或修改时触发更新。

Vue 2.x 使用 Object.defineProperty：

function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      console.log(`读取 ${key}: ${val}`);
      return val;
    },
    set(newVal) {
      if (newVal !== val) {
        console.log(`设置 ${key}: ${newVal}`);
        val = newVal;
        // 触发视图更新
      }
    }
  });
}

Vue 3.x 使用 Proxy：

const reactive = (target) => {
  return new Proxy(target, {
    get(target, key, receiver) {
      console.log(`读取 ${key}`);
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      console.log(`设置 ${key}: ${value}`);
      Reflect.set(target, key, value, receiver);
      // 触发视图更新
      return true;
    }
  });
};

依赖收集与发布-订阅

Vue 通过 Dep（依赖收集器） 和 Watcher（观察者） 实现数据变化时的视图更新。

Dep（依赖收集器）
每个响应式属性对应一个 Dep 实例，用于存储依赖该属性的 Watcher。

class Dep {
  constructor() {
    this.subscribers = [];
  }
  depend() {
    if (target && !this.subscribers.includes(target)) {
      this.subscribers.push(target);
    }
  }
  notify() {
    this.subscribers.forEach(sub => sub());
  }
}

Watcher（观察者）
在模板编译时，为每个需要更新的 DOM 节点创建 Watcher，订阅数据变化。

let target = null;
function watcher(fn) {
  target = fn;
  fn(); // 首次执行触发 getter，收集依赖
  target = null;
}

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

v-model 是语法糖，本质是 :value 绑定和 @input 监听的组合：

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

初始化阶段
- 通过数据劫持监听 message 的变化。
- 编译模板时，为 input 创建 Watcher，订阅 message 的 Dep。
数据更新流程
- 用户输入触发 @input，修改 message。
- message 的 setter 调用 Dep.notify()，通知所有 Watcher 更新视图。