当前位置：首页 > VUE

vue mvvm的实现

2026-03-09 14:40:10VUE

Vue MVVM 的实现原理

Vue 的 MVVM（Model-View-ViewModel）实现主要依赖于数据绑定和响应式系统。以下是 Vue 实现 MVVM 的核心机制：

数据劫持（响应式系统）

Vue 使用 Object.defineProperty（Vue 2）或 Proxy（Vue 3）劫持数据的读写操作。当数据被修改时，触发视图更新。

// Vue 2 的响应式实现（简化版）
function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      return val;
    },
    set(newVal) {
      if (newVal === val) return;
      val = newVal;
      // 触发视图更新
      dep.notify();
    }
  });
}

依赖收集

每个响应式属性关联一个 Dep（依赖管理器），在属性被访问时收集依赖（Watcher），在属性变化时通知依赖更新。

vue mvvm的实现

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

虚拟 DOM 和 Diff 算法

Vue 通过虚拟 DOM 优化渲染性能。当数据变化时，生成新的虚拟 DOM，通过 Diff 算法对比新旧虚拟 DOM，计算出最小更新操作。

// 简化的虚拟 DOM 结构
{
  tag: 'div',
  attrs: { id: 'app' },
  children: [
    { tag: 'span', children: 'Hello' }
  ]
}

模板编译

Vue 将模板编译为渲染函数。模板中的指令（如 v-model）会被解析为对应的数据绑定和事件处理逻辑。

vue mvvm的实现

// 模板
<input v-model="message">

// 编译后的渲染函数（简化）
function render() {
  return _c('input', {
    domProps: { value: this.message },
    on: { input: e => { this.message = e.target.value } }
  });
}

双向绑定（v-model）

v-model 是语法糖，自动处理 value 属性和 input 事件，实现表单元素与数据的双向绑定。

// v-model 的实现原理
<input :value="message" @input="message = $event.target.value">

Vue 3 的改进

Vue 3 使用 Proxy 替代 Object.defineProperty，解决了 Vue 2 中无法检测数组和对象新增属性的问题，并提高了性能。

// Vue 3 的响应式实现（简化版）
function reactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
      track(target, key);
      return target[key];
    },
    set(target, key, value) {
      target[key] = value;
      trigger(target, key);
    }
  });
}

Vue 的 MVVM 实现通过响应式系统、虚拟 DOM 和模板编译等技术，实现了数据与视图的自动同步，开发者只需关注数据逻辑，无需手动操作 DOM。