当前位置：首页 > VUE

vue双向绑定实现

2026-01-19 04:12:11VUE

Vue 双向绑定实现原理

Vue 的双向绑定主要通过 v-model 指令实现，其核心是结合数据劫持（Object.defineProperty 或 Proxy）和发布-订阅模式。

数据劫持

Vue 2.x 使用 Object.defineProperty 劫持对象的属性，通过 getter 和 setter 监听数据变化：

vue双向绑定实现

let data = { value: '' };
Object.defineProperty(data, 'value', {
  get() {
    return this._value;
  },
  set(newVal) {
    this._value = newVal;
    console.log('数据更新了');
  }
});

Vue 3.x 改用 Proxy 实现更全面的拦截：

let data = { value: '' };
let proxy = new Proxy(data, {
  get(target, key) {
    return target[key];
  },
  set(target, key, value) {
    target[key] = value;
    console.log('数据更新了');
    return true;
  }
});

发布-订阅模式

通过 Dep（依赖收集器）和 Watcher（观察者）实现视图更新：

vue双向绑定实现

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

let dep = new Dep();
let target = null;

function watcher(fn) {
  target = fn;
  dep.depend();
  fn();
  target = null;
}

`v-model` 的实现

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

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

完整实现示例

以下是一个简化版的双向绑定实现：

class Vue {
  constructor(options) {
    this.$data = options.data;
    this.observe(this.$data);
    this.compile(options.el);
  }

  observe(data) {
    Object.keys(data).forEach(key => {
      let value = data[key];
      const dep = new Dep();
      Object.defineProperty(data, key, {
        get() {
          if (Dep.target) dep.addSub(Dep.target);
          return value;
        },
        set(newVal) {
          value = newVal;
          dep.notify();
        }
      });
    });
  }

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

  compileNode(node) {
    node.childNodes.forEach(node => {
      if (node.nodeType === 3) {
        // 文本节点处理
        const reg = /\{\{\s*(\w+)\s*\}\}/;
        if (reg.test(node.nodeValue)) {
          const key = RegExp.$1;
          node.nodeValue = this.$data[key];
          new Watcher(this.$data, key, newVal => {
            node.nodeValue = newVal;
          });
        }
      } else if (node.nodeType === 1) {
        // 元素节点处理
        if (node.hasAttribute('v-model')) {
          const key = node.getAttribute('v-model');
          node.value = this.$data[key];
          new Watcher(this.$data, key, newVal => {
            node.value = newVal;
          });
          node.addEventListener('input', e => {
            this.$data[key] = e.target.value;
          });
        }
      }
    });
  }
}

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

class Watcher {
  constructor(data, key, cb) {
    Dep.target = this;
    this.cb = cb;
    this.key = key;
    this.data = data;
    this.value = data[key]; // 触发getter
    Dep.target = null;
  }
  update() {
    this.value = this.data[this.key];
    this.cb(this.value);
  }
}