mvvm实现vue

MVVM 模式在 Vue 中的实现

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

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

Vue 通过数据劫持和发布-订阅模式实现双向绑定。使用 Object.defineProperty（Vue 2）或 Proxy（Vue 3）监听数据变化：

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

模板语法（View 层）

Vue 的模板通过指令实现与 ViewModel 的交互：

<div id="app">
  <!-- 双向绑定 -->
  <input v-model="message">
  <!-- 数据渲染 -->
  <p>{{ message }}</p>
</div>

ViewModel 核心

Vue 实例作为 ViewModel，连接 View 和 Model：

new Vue({
  el: '#app',
  data: {    // Model
    message: 'Hello MVVM'
  },
  methods: { // 逻辑处理
    update() {
      this.message = 'Updated';
    }
  }
});

虚拟 DOM 优化

Vue 通过虚拟 DOM 实现高效视图更新：

// 伪代码示例
function patch(oldVnode, newVnode) {
  if (sameVnode(oldVnode, newVnode)) {
    patchVnode(oldVnode, newVnode);
  } else {
    replaceNode(oldVnode, newVnode);
  }
}

响应式系统原理

1. 依赖收集：在 getter 中收集依赖
2. 派发更新：在 setter 中通知 Watcher
3. 批量更新：通过 nextTick 实现异步更新队列

// 简化的 Watcher 实现
class Watcher {
  constructor(vm, key, cb) {
    this.vm = vm;
    this.cb = cb;
    Dep.target = this;
    this.value = vm[key]; // 触发 getter
    Dep.target = null;
  }
  update() {
    this.cb.call(this.vm, this.vm[this.key]);
  }
}

组件化实现

Vue 组件是 MVVM 的扩展，每个组件都是独立的 MVVM 单元：

Vue.component('my-component', {
  props: ['title'],     // 外部数据
  data() {              // 内部数据
    return { count: 0 }
  },
  template: `
    <div>
      <h3>{{ title }}</h3>
      <button @click="count++">{{ count }}</button>
    </div>
  `
});

生命周期钩子

Vue 提供生命周期钩子便于在 MVVM 各阶段插入逻辑：

new Vue({
  created() { /* 实例创建完成 */ },
  mounted() { /* DOM 挂载完成 */ },
  beforeUpdate() { /* 数据更新前 */ },
  destroyed() { /* 实例销毁 */ }
});

通过以上机制，Vue 实现了：

• 数据驱动视图（Model → View）
• 视图交互反馈到数据（View → Model）
• 业务逻辑与视图分离（ViewModel）