当前位置：首页 > VUE

mvvm实现vue

2026-01-08 00:59:15VUE

MVVM 模式在 Vue 中的实现

MVVM（Model-View-ViewModel）是一种前端架构模式，Vue 的设计灵感来源于此。以下是 MVVM 在 Vue 中的核心实现方式：

数据绑定（Model 与 View 的同步）

Vue 通过数据劫持（Object.defineProperty 或 Proxy）实现双向绑定。当数据变化时，视图自动更新；反之，用户输入通过 v-model 等指令更新数据。

// 示例：双向绑定
new Vue({
  data: {
    message: 'Hello MVVM'
  },
  template: `<input v-model="message">`
});

ViewModel 的核心作用

Vue 实例充当 ViewModel，连接 View（模板）和 Model（数据）。它负责：

模板编译（将模板转换为渲染函数）
依赖追踪（确定哪些数据需要更新）
事件处理（methods 中的函数）

// ViewModel 示例
const vm = new Vue({
  el: '#app',
  data: { count: 0 },
  methods: {
    increment() { this.count++; }
  }
});

模板语法（View 层）

Vue 的模板语法（如 {{ }} 插值、v-bind、v-on）是声明式的，开发者只需描述“视图如何与数据关联”，无需手动操作 DOM。

<!-- 视图模板示例 -->
<div id="app">
  <p>{{ message }}</p>
  <button @click="reverseMessage">Reverse</button>
</div>

虚拟 DOM 优化

Vue 通过虚拟 DOM 比对差异，最小化真实 DOM 操作，提升性能。这是 MVVM 中 View 与 ViewModel 高效协作的关键。

// 虚拟 DOM 示例
render(h) {
  return h('div', { attrs: { id: 'app' } }, this.message);
}

组件化实现

Vue 组件是 MVVM 的扩展，每个组件都是一个独立的 ViewModel 单元，包含自己的数据、视图和逻辑。

// 组件化示例
Vue.component('todo-item', {
  props: ['title'],
  template: '<li>{{ title }}</li>'
});

关键实现原理

响应式系统
- 使用 Object.defineProperty（Vue 2）或 Proxy（Vue 3）劫持数据属性的读写。
- 每个数据属性关联一个 Dep 实例，用于收集依赖（Watcher）。
依赖收集与派发更新
- 渲染时触发数据的 getter，将当前 Watcher（组件渲染函数）添加到依赖中。
- 数据变化时触发 setter，通知所有依赖的 Watcher 重新计算。
异步批量更新
- 通过 nextTick 实现异步队列更新，避免重复渲染。

// 简化的响应式原理代码
function defineReactive(obj, key) {
  const dep = new Dep();
  let val = obj[key];
  Object.defineProperty(obj, key, {
    get() {
      if (Dep.target) dep.addSub(Dep.target);
      return val;
    },
    set(newVal) {
      val = newVal;
      dep.notify(); // 通知更新
    }
  });
}