当前位置：首页 > VUE

vue双向绑定实现函数

2026-01-23 14:18:15VUE

Vue 双向绑定实现原理

Vue 的双向绑定核心是通过数据劫持结合发布者-订阅者模式实现的，主要依赖 Object.defineProperty 或 Proxy。

vue双向绑定实现函数

使用 Object.defineProperty

function defineReactive(obj, key, val) {
  const dep = new Dep(); // 依赖收集器

  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get() {
      if (Dep.target) {
        dep.addSub(Dep.target); // 收集依赖
      }
      return val;
    },
    set(newVal) {
      if (newVal === val) return;
      val = newVal;
      dep.notify(); // 通知更新
    }
  });
}

// 依赖收集器
class Dep {
  constructor() {
    this.subs = [];
  }
  addSub(sub) {
    this.subs.push(sub);
  }
  notify() {
    this.subs.forEach(sub => sub.update());
  }
}

使用 Proxy（Vue 3 实现）

function reactive(obj) {
  const handler = {
    get(target, key, receiver) {
      track(target, key); // 依赖收集
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      const oldValue = target[key];
      const result = Reflect.set(target, key, value, receiver);
      if (oldValue !== value) {
        trigger(target, key); // 触发更新
      }
      return result;
    }
  };
  return new Proxy(obj, handler);
}

完整实现示例

class Vue {
  constructor(options) {
    this._data = options.data;
    this.observer(this._data);
    this.compile(options.el);
  }

  observer(data) {
    Object.keys(data).forEach(key => {
      defineReactive(data, key, data[key]);
    });
  }

  compile(el) {
    const element = document.querySelector(el);
    this.compileNode(element);
  }

  compileNode(node) {
    if (node.nodeType === 1) {
      Array.from(node.attributes).forEach(attr => {
        if (attr.name.startsWith('v-')) {
          const dir = attr.name.substring(2);
          if (dir === 'model') {
            const exp = attr.value;
            node.value = this._data[exp];
            node.addEventListener('input', e => {
              this._data[exp] = e.target.value;
            });
          }
        }
      });
    }
  }
}