MVVC模式：模型、视图、视图模型，你真的了解它们之间的关系吗？

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
💬 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。

MVVC（Model-View-ViewModel）是一种应用程序架构模式，常用于用户界面的设计，尤其在现代前端开发（如使用 Angular、React 和 Vue.js 等框架）中得到广泛应用。MVVC 将应用的结构分为三个主要部分：模型（Model）、视图（View）和视图模型（ViewModel），与传统的 MVC 模式相比，它在数据绑定和响应式编程方面具有更强的优势。

MVVC 的组成部分

1. 模型（Model）

• 定义：模型代表应用程序的数据和业务逻辑。它与数据源（如数据库或 API）交互，提供应用的核心功能。
• 职责：
  • 管理数据的获取、保存和更新。
  • 执行业务逻辑和数据验证。
  • 通知视图模型数据的变化。

示例：

class UserModel {
    constructor() {
        this.users = []; // 存储用户数据
    }
    
    addUser(user) {
        this.users.push(user);
    }
    
    getUsers() {
        return this.users;
    }
}

2. 视图（View）

• 定义：视图是用户界面的表现层，负责向用户展示模型中的数据，并通过 UI 元素接收用户输入。
• 职责：
  • 显示从视图模型获取的数据。
  • 监听用户操作（如点击、输入等），并将这些操作传递给视图模型。
  • 更新用户界面，以反映数据变化。

示例（使用 HTML）：

<div id="userList">
    <!-- 用户列表将会在这里显示 -->
</div>
<input type="text" id="userInput" placeholder="Enter user name">
<button id="addUserBtn">Add User</button>

3. 视图模型（ViewModel）

• 定义：视图模型是视图和模型之间的中介，用于将视图与模型连接起来。它负责处理用户输入、更新模型，以及将模型的数据转换为视图可以显示的格式。
• 职责：
  • 处理用户的输入，并将它们传递到模型。
  • 从模型获取数据，并将其转换为适合视图展示的格式。
  • 实现数据绑定，使得模型与视图之间的数据更新能够自动同步。

示例：

class UserViewModel {
    constructor(model) {
        this.model = model; // 绑定模型
        this.userName = ''; // 用于用户输入的绑定
    }
    
    addUser() {
        if (this.userName) {
            this.model.addUser(this.userName); // 更新模型
            this.userName = ''; // 清空输入
            this.notifyView(); // 通知视图更新
        }
    }
    
    notifyView() {
        const users = this.model.getUsers();
        const userListDiv = document.getElementById('userList');
        userListDiv.innerHTML = ""; // 清空现有内容
        users.forEach(user => {
            const div = document.createElement('div');
            div.textContent = user; // 显示用户
            userListDiv.appendChild(div);
        });
    }
}

工作流程

1. 用户交互：用户在视图中输入内容（例如，添加用户）。
2. 视图将输入传递给视图模型：视图将用户的输入（如文本框的内容）传递给视图模型。
3. 视图模型更新模型：视图模型使用用户输入调用模型的方法，更新数据。
4. 数据变化通知：模型通知视图模型数据已更新。
5. 视图模型更新视图：视图模型将更新的数据传递给视图，更新页面中的内容。

完整示例：

// 假设这里有用户的输入事件监听
document.getElementById('addUserBtn').addEventListener('click', function() {
    userViewModel.addUser(); // 添加用户
});

// 实际使用
const userModel = new UserModel();
const userViewModel = new UserViewModel(userModel);

// 初始数据展示
userViewModel.notifyView();

MVVC 的优点

1. 数据绑定：MVVC 模式通常支持双向数据绑定，使得视图与视图模型之间的同步更为简单与直观，减少了手动更新界面的工作量。
2. 清晰的职责分离：视图、视图模型和模型之间的职责分离，使得各个部分的代码更易于管理和测试。
3. 可维护性和可扩展性：由于各部分功能明确，添加新功能或进行维护时，不会影响其他部分，保持了良好的代码结构。

MVVC 的缺点

1. 学习曲线：对于初学者来说，理解视图模型的角色和数据绑定的概念可能需要时间。
2. 复杂性：在某些简单应用中，使用 MVVC 可能会过于复杂，引入不必要的架构开销。
3. 性能问题：如果没有有效管理，双向数据绑定可能会导致性能下降，尤其是在数据量大或频繁更新时。

小结

MVVC 模式通过将视图、视图模型和模型区分开来，适应了现代开发中对动态和响应式应用的需求。它提供了一种灵活的方式来处理用户界面逻辑，有助于创建可维护、可扩展的应用程序结构。MVVC 常常在现代前端框架中实现，如使用 React、Vue.js 和 Angular 时，通常都会采用类似于 MVVC 的架构设计。