当前位置：首页 > VUE

vue mvvm实现

2026-02-10 08:01:03VUE

Vue 的 MVVM 实现原理

Vue 的 MVVM（Model-View-ViewModel）模式通过数据绑定和响应式系统实现视图与数据的自动同步。以下是其核心实现机制：

数据劫持与响应式

Vue 使用 Object.defineProperty（Vue 2）或 Proxy（Vue 3）劫持数据对象的属性访问和修改。当数据变化时，触发依赖更新。

// Vue 2 数据劫持示例
function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      console.log('读取数据');
      return val;
    },
    set(newVal) {
      if (newVal === val) return;
      console.log('更新数据');
      val = newVal;
      // 触发视图更新
    }
  });
}

依赖收集与观察者模式

每个响应式属性关联一个 Dep（依赖收集器），在 getter 中收集依赖（Watcher），在 setter 中通知依赖更新。

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

class Watcher {
  update() {
    // 更新视图
  }
}

虚拟 DOM 与差异更新

Vue 将模板编译为虚拟 DOM（VNode），通过 diff 算法对比新旧 VNode，最小化 DOM 操作。

function patch(oldVnode, newVnode) {
  // 对比节点差异并更新真实 DOM
}

模板编译

Vue 将模板转换为渲染函数，解析指令（如 v-model）并生成绑定代码。

// v-model 双向绑定实现
<input v-model="message" />
// 编译为：
<input :value="message" @input="message = $event.target.value" />

双向绑定实现示例

以下是一个简化的 MVVM 实现：

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) {
    if (node.nodeType === 1) { // 元素节点
      Array.from(node.attributes).forEach(attr => {
        if (attr.name.startsWith('v-')) {
          const dir = attr.name.substring(2);
          if (dir === 'model') {
            new Watcher(this.$data, attr.value, (val) => {
              node.value = val;
            });
            node.addEventListener('input', (e) => {
              this.$data[attr.value] = e.target.value;
            });
          }
        }
      });
    }
  }
}