理解 MVVM 设计模式

一、什么是 MVVM 设计模式？

MVVM（Model-View-ViewModel）是一种软件架构模式，用于分离 UI 和业务逻辑，提高代码的可维护性和可测试性。MVVM 的三个核心部分如下：

• Model（模型）：表示数据和业务逻辑，通常是从后端获取的原始数据或本地状态。
• View（视图）：用户界面，负责展示数据和接收用户交互（通常是 HTML 模板）。
• ViewModel（视图模型）：连接 Model 和 View 的桥梁，负责处理数据逻辑、监听用户输入，并将数据映射到视图。

MVVM 的核心在于数据绑定和命令：

• 双向数据绑定：View 和 ViewModel 之间通过绑定机制自动同步，数据变化会更新视图，用户输入也会更新数据。
• 命令：用户在 View 上的操作（如点击）通过命令传递到 ViewModel，触发业务逻辑。

相比传统的 MVC（Model-View-Controller），MVVM 更强调数据的自动化同步，减少了手动 DOM 操作的复杂性。

二、MVVM 的工作原理

MVVM 的工作流程可以简单概括为：

1. ViewModel 监听 Model 的变化，更新自身状态。
2. View 通过绑定机制（通常是模板语法）展示 ViewModel 的数据。
3. 用户在 View 上操作，触发事件（命令）到 ViewModel。
4. ViewModel 根据事件更新 Model，并通过数据绑定通知 View 更新。

这种模式的核心优势是解耦：View 和 Model 不直接交互，ViewModel 作为中介降低了耦合度。

三、Vue 2 如何实现 MVVM？

Vue.js 是一个典型的 MVVM 框架，它通过响应式系统和指令机制实现了 MVVM 的理念。下面我们结合 Vue 的特性，分析它如何映射到 MVVM 的各个部分。

1. View：模板语法

Vue 的模板（template）对应 MVVM 的 View 层，使用声明式语法绑定数据。例如：

<div id="app">
  <input v-model="message" placeholder="输入内容" />
  <p>你输入的内容是：</p>
</div>

• v-model 实现了双向绑定，`` 实现了单向绑定，视图直接反映数据状态。

2. Model：数据层

Model 对应 Vue 实例中的 data 对象，存储原始数据：

new Vue({
  el: '#app',
  data: {
    message: ''
  }
});

• message 是 Model 的一部分，Vue 通过响应式系统将其与 ViewModel 绑定。

3. ViewModel：Vue 实例

Vue 实例本身就是 ViewModel，它通过以下机制连接 View 和 Model：

• 响应式系统：Vue 2 使用 Object.defineProperty 为 data 中的属性添加 getter 和 setter，实现数据劫持。当 message 变化时，Vue 自动通知视图更新。
• 指令系统：如 v-model、v-bind 等，自动处理 View 和 ViewModel 的同步。
• 事件监听：通过 v-on 监听用户操作，触发 ViewModel 的逻辑。

4. 数据绑定与命令

• 双向绑定：v-model 让 input 的值和 message 保持同步。
• 命令：用户输入时，Vue 自动更新 message，并通过模板语法更新 <p> 标签的内容。