当前位置：首页 > VUE

vue双向绑定实现简单

2026-02-09 17:29:43VUE

Vue 双向绑定的实现原理

Vue 的双向绑定是通过数据劫持结合发布者-订阅者模式实现的，主要依赖 Object.defineProperty（Vue 2.x）或 Proxy（Vue 3.x）来监听数据变化。

vue双向绑定实现简单

使用 `Object.defineProperty` 实现

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

vue双向绑定实现简单

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());
  }
}

Dep.target = null;

使用 `Proxy` 实现

Vue 3.x 改用 Proxy 实现数据劫持，可以监听整个对象而无需递归遍历。

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key, receiver) {
      track(target, key); // 收集依赖
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      Reflect.set(target, key, value, receiver);
      trigger(target, key); // 触发更新
      return true;
    }
  });
}

const targetMap = new WeakMap();

function track(target, key) {
  if (!Dep.target) return;
  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(Dep.target);
}

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

实现简单的双向绑定

结合 v-model 指令，可以实现一个简单的双向绑定示例。

<div id="app">
  <input v-model="message" />
  <p>{{ message }}</p>
</div>

<script>
  function compile(el, vm) {
    el.querySelectorAll('[v-model]').forEach(node => {
      const key = node.getAttribute('v-model');
      node.value = vm.data[key];
      node.addEventListener('input', () => {
        vm.data[key] = node.value;
      });
    });

    el.querySelectorAll('*').forEach(node => {
      if (node.textContent.includes('{{')) {
        const key = node.textContent.match(/\{\{(.*?)\}\}/)[1].trim();
        node.textContent = vm.data[key];
        new Watcher(vm, key, val => {
          node.textContent = val;
        });
      }
    });
  }

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

  const vm = new Vue({
    el: document.getElementById('app'),
    data: { message: 'Hello Vue!' }
  });
</script>