当前位置：首页 > VUE

vue怎样实现mvvm

2026-03-07 19:18:56VUE

Vue 实现 MVVM 的原理

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

数据劫持（响应式系统）

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

vue怎样实现mvvm

// Vue 2 的响应式实现示例
function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      console.log('读取属性', key);
      return val;
    },
    set(newVal) {
      if (newVal === val) return;
      console.log('更新属性', key);
      val = newVal;
      // 触发依赖更新
    }
  });
}

依赖收集与发布订阅

通过 Dep（依赖管理器）和 Watcher（观察者）实现：

vue怎样实现mvvm

每个响应式属性关联一个 Dep 实例。
模板编译时创建 Watcher，触发属性的 getter 时将 Watcher 添加到 Dep 中。
数据变化时通过 setter 通知 Dep，触发所有关联 Watcher 的更新。

模板编译

Vue 将模板编译为渲染函数（Render Function），过程中解析指令（如 v-model）和插值表达式，建立数据与视图的绑定关系。

// 示例：v-model 双向绑定实现
<input v-model="message">
// 编译后等效于
<input :value="message" @input="message = $event.target.value">

Virtual DOM 与 Diff 算法

通过虚拟 DOM 高效比对变化，最小化真实 DOM 操作：

渲染函数生成虚拟 DOM 树。
数据变化时生成新虚拟 DOM，通过 Diff 算法计算差异。
精准更新真实 DOM。

关键代码结构

// 简化版 MVVM 类
class MVVM {
  constructor(options) {
    this.$data = options.data;
    this.$el = document.querySelector(options.el);
    this.observe(this.$data); // 数据劫持
    this.compile(this.$el);   // 模板编译
  }

  observe(data) { /* 实现响应式 */ }
  compile(node) { /* 解析指令和插值 */ }
}