你彻底搞懂这个前端和移动端开发中非常重要的设计模式。

一、MVVM 是什么？

MVVM 是 Model-View-ViewModel 的缩写，是一种分离界面（UI）和业务逻辑的设计模式，核心目标是降低代码耦合度、提高可维护性和可测试性。

可以用一个简单的比喻理解：

• 你去餐厅吃饭：View 是菜单（你能看到的界面），Model 是后厨的食材（原始数据），ViewModel 是服务员（连接菜单和后厨，把食材加工成菜品，再送到你面前）。
• 核心特点：数据双向绑定（你点单后后厨会收到，后厨做好后菜单会显示 “已上菜”）。

二、MVVM 的核心组成部分

1. Model（模型）

• 作用：存储和处理业务数据，比如从接口获取的数据、本地数据库数据、纯业务逻辑（如计算、验证）。
• 特点：不依赖任何界面相关的代码，只关注数据本身，是纯数据 / 逻辑层。
• 示例（JavaScript）：

  javascript

  运行

  // Model：纯数据/业务逻辑，和界面无关
  class UserModel {
    // 获取用户数据（模拟接口请求）
    async getUserInfo(userId) {
      // 模拟异步请求
      return new Promise(resolve => {
        setTimeout(() => {
          resolve({
            id: userId,
            name: "张三",
            age: 25
          });
        }, 1000);
      });
    }
  
    // 业务逻辑：判断是否成年
    isAdult(age) {
      return age >= 18;
    }
  }
  

2. View（视图）

• 作用：用户能看到的界面（如 HTML 页面、移动端 UI 组件），负责展示数据和接收用户操作（点击、输入等）。
• 特点：MVVM 中的 View 是 “被动的”，不直接操作数据，只通过绑定和 ViewModel 交互。
• 示例（HTML）：

  html

  预览

  <!-- View：纯界面，通过指令绑定ViewModel的数据和方法 -->
  <div id="app">
    <h1>姓名：{{ userName }}</h1>
    <p>年龄：{{ userAge }}</p>
    <p>{{ isAdultText }}</p>
    <button @click="getUser">获取用户信息</button>
  </div>
  

3. ViewModel（视图模型）

• 作用：连接 View 和 Model 的 “桥梁”，核心职责：
  • 从 Model 获取数据，处理后提供给 View 展示；
  • 监听 View 的用户操作，同步更新 Model 的数据；
  • 实现数据双向绑定（View 数据变化 → ViewModel → Model，反之亦然）。
• 示例（Vue.js 实现 ViewModel，最典型的 MVVM 框架）：

  javascript

  运行

  // ViewModel：连接View和Model，处理数据绑定和交互
  const vm = new Vue({
    el: '#app',
    data: { // 提供给View展示的数据
      userName: '',
      userAge: 0
    },
    computed: { // 派生数据（View需要的加工后数据）
      isAdultText() {
        return this.userAge >= 18 ? '成年' : '未成年';
      }
    },
    methods: { // 处理View的用户操作
      async getUser() {
        const userModel = new UserModel();
        // 从Model获取数据
        const user = await userModel.getUserInfo(1);
        // 更新ViewModel的数据 → 自动同步到View（双向绑定）
        this.userName = user.name;
        this.userAge = user.age;
      }
    }
  });
  

三、MVVM 的核心优势

1. 低耦合：View 和 Model 完全分离，修改界面不需要改业务逻辑，改业务逻辑不影响界面；
2. 可复用：ViewModel 中的逻辑可以在多个 View 中复用；
3. 易测试：ViewModel 不依赖 View，可单独编写单元测试；
4. 简化交互：数据双向绑定省去了手动操作 DOM 的代码（如 jQuery 的$('#id').val()），开发效率更高。

四、MVVM 和 MVC 的区别（补充）

很多人会混淆 MVVM 和 MVC，核心差异：

表格

特性	MVC	MVVM
核心关系	View → Controller → Model（单向）	View ↔ ViewModel ↔ Model（双向）
界面交互	需要手动更新 DOM	自动双向绑定
职责划分	Controller 承担过多逻辑	ViewModel 专注数据绑定
典型应用	后端（如 Spring MVC）	前端（Vue/React/Angular）、移动端（Android Jetpack Compose）

总结

1. MVVM 的核心是分离 View 和 Model，通过 ViewModel 实现数据双向绑定，让界面和业务逻辑解耦；
2. 三大组成：Model（数据 / 业务）、View（界面）、ViewModel（桥梁 + 双向绑定）；
3. 优势是低耦合、易维护、开发效率高，是前端 / 移动端主流的设计模式（Vue、React（类 MVVM）、Angular 均基于此思想）。