当前位置：首页 > VUE

vue对mvvm的实现

2026-02-23 15:18:15VUE

Vue 的 MVVM 实现原理

Vue 通过数据绑定和响应式系统实现了 MVVM（Model-View-ViewModel）模式的核心思想。以下是 Vue 实现 MVVM 的关键机制：

数据劫持与响应式系统

Vue 使用 Object.defineProperty（Vue 2）或 Proxy（Vue 3）劫持数据对象的属性访问。当数据变化时，依赖该数据的视图会自动更新。

Vue 2 的响应式实现示例：

vue对mvvm的实现

function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      console.log(`读取 ${key}`);
      return val;
    },
    set(newVal) {
      console.log(`设置 ${key} 为 ${newVal}`);
      val = newVal;
      // 触发视图更新
    }
  });
}

虚拟 DOM 与 Diff 算法

Vue 通过虚拟 DOM 实现高效的视图更新。当数据变化时，Vue 会生成新的虚拟 DOM 树，通过 Diff 算法比较新旧树的差异，最终只更新真实 DOM 中需要变化的部分。

模板编译

Vue 模板会被编译成渲染函数。这个编译过程将模板中的指令和插值转换为可执行的 JavaScript 代码，建立数据与视图之间的绑定关系。

vue对mvvm的实现

<!-- 模板 -->
<div>{{ message }}</div>

<!-- 编译后的渲染函数 -->
function render() {
  return _c('div', [_v(_s(message))]);
}

依赖收集与派发更新

Vue 通过 Watcher 和 Dep 类实现依赖收集：

每个响应式属性都有一个 Dep 实例
当渲染函数执行时，会触发属性的 getter，将当前 Watcher 添加到 Dep 中
当属性变化时，触发 setter，Dep 会通知所有 Watcher 更新

双向数据绑定实现

Vue 通过 v-model 指令实现双向绑定，本质上是语法糖：

<input v-model="message">

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

Vue 3 的改进

Vue 3 使用 Proxy 代替 Object.defineProperty，解决了 Vue 2 中无法检测数组和对象新增属性的限制。Proxy 可以拦截整个对象的所有操作，提供更完善的响应式支持。

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。