当前位置：首页 > VUE

vue mvvm 实现

2026-03-27 19:09:45VUE

Vue MVVM 实现原理

Vue.js 是一个基于 MVVM（Model-View-ViewModel）模式的前端框架。MVVM 的核心思想是将视图（View）与数据（Model）分离，通过 ViewModel 实现双向绑定。

核心机制

数据劫持（Data Observation） Vue 使用 Object.defineProperty（Vue 2.x）或 Proxy（Vue 3.x）对数据进行劫持。当数据发生变化时，能够自动触发视图更新。

// Vue 2.x 数据劫持示例
const data = { name: 'Vue' };
Object.defineProperty(data, 'name', {
  get() {
    return this._name;
  },
  set(newVal) {
    console.log('数据更新了');
    this._name = newVal;
  }
});

依赖收集（Dependency Collection） Vue 通过 Dep 类和 Watcher 类实现依赖收集。每个响应式属性都有一个 Dep 实例，用于存储依赖它的 Watcher。

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

class Watcher {
  update() {
    console.log('视图更新');
  }
}

模板编译（Template Compilation） Vue 将模板编译为渲染函数。在编译过程中，解析指令和插值表达式，并建立数据与视图的绑定关系。

// 模板转换为渲染函数
<div>{{ message }}</div>
// 编译为
function render() {
  return _c('div', [_v(_s(message))]);
}

双向绑定实现

v-model 原理 v-model 是语法糖，结合了 :value 和 @input 实现双向绑定。

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

发布-订阅模式 ViewModel 作为中介，监听 Model 的变化并更新 View，同时监听 View 的事件并更新 Model。

// 简化版实现
function 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();
      }
    });
  });
}

虚拟 DOM 优化

Vue 使用虚拟 DOM 来高效更新视图。当数据变化时，先对比新旧虚拟 DOM 的差异，再最小化地更新真实 DOM。

// 虚拟 DOM 示例
const vnode = {
  tag: 'div',
  props: { id: 'app' },
  children: [{ tag: undefined, text: 'Hello' }]
};

生命周期管理

Vue 组件有完整的生命周期，从创建到销毁，每个阶段都有对应的钩子函数可供操作。

export default {
  created() {
    console.log('组件创建完成');
  },
  mounted() {
    console.log('DOM 挂载完成');
  }
};

响应式系统升级（Vue 3）

Vue 3 改用 Proxy 实现响应式，解决了 Vue 2 中无法检测数组和对象属性增删的问题。

vue mvvm 实现

// Vue 3 响应式实现
const reactive = (target) => {
  return new Proxy(target, {
    get(target, key) {
      track(target, key);
      return target[key];
    },
    set(target, key, value) {
      target[key] = value;
      trigger(target, key);
    }
  });
};

通过以上机制，Vue 实现了完整的 MVVM 架构，使开发者能够专注于业务逻辑，而不必手动处理 DOM 操作。