当前位置：首页 > VUE

vue双向数据绑定实现

2026-01-20 03:34:37VUE

双向数据绑定的概念

双向数据绑定是指视图（View）与模型（Model）之间的双向同步。当数据发生变化时，视图自动更新；当用户操作视图时，数据也会自动更新。Vue 通过 v-model 指令实现双向数据绑定。

Vue 2.x 的实现方式

Vue 2.x 使用 Object.defineProperty 实现数据劫持，结合发布-订阅模式完成双向绑定。

数据劫持

通过 Object.defineProperty 劫持对象的属性，在属性被访问或修改时触发 getter 和 setter。

vue双向数据绑定实现

function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      console.log(`get ${key}: ${val}`);
      return val;
    },
    set(newVal) {
      if (newVal !== val) {
        console.log(`set ${key}: ${newVal}`);
        val = newVal;
      }
    }
  });
}

依赖收集与派发更新

Vue 通过 Dep（依赖管理器）和 Watcher（观察者）实现依赖收集与派发更新。

class Dep {
  constructor() {
    this.subs = [];
  }
  addSub(sub) {
    this.subs.push(sub);
  }
  notify() {
    this.subs.forEach(sub => sub.update());
  }
}

class Watcher {
  constructor() {
    Dep.target = this;
  }
  update() {
    console.log('视图更新');
  }
}

实现 `v-model`

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

vue双向数据绑定实现

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

Vue 3.x 的实现方式

Vue 3.x 使用 Proxy 替代 Object.defineProperty，提供了更好的性能和更全面的劫持能力。

数据劫持

Proxy 可以直接监听整个对象，无需递归遍历属性。

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
      console.log(`get ${key}: ${target[key]}`);
      return target[key];
    },
    set(target, key, value) {
      console.log(`set ${key}: ${value}`);
      target[key] = value;
      return true;
    }
  });
}

响应式系统

Vue 3.x 的响应式系统基于 effect 和 track/trigger 机制。

const targetMap = new WeakMap();

function track(target, key) {
  let depsMap = targetMap.get(target);
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()));
  }
  let dep = depsMap.get(key);
  if (!dep) {
    depsMap.set(key, (dep = new Set()));
  }
  dep.add(effect);
}

function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) return;
  const dep = depsMap.get(key);
  if (dep) {
    dep.forEach(effect => effect());
  }
}