MVC与MVVM的区别是什么？

技术背景

在软件开发中，架构模式对于组织代码和管理软件的复杂度至关重要。MVC（Model-View-Controller）和MVVM（Model-View-ViewModel）是两种常见的架构模式。MVC模式最早在20世纪70年代被提出，最初应用于桌面图形用户界面（GUI）开发，后来在Web开发中也被广泛使用。而MVVM模式则是在MVC的基础上发展而来，它起源于Martin Fowler的Presentation Model，在WPF/Silverlight开发中得到了广泛应用，随着Web技术的发展，也逐渐在Web开发中流行起来。

实现步骤

MVC实现步骤

定义模型（Model）：模型负责存储应用的数据和业务逻辑，它不依赖于视图和控制器。
创建视图（View）：视图负责展示数据给用户，处理用户的交互。
实现控制器（Controller）：控制器作为视图和模型之间的桥梁，接收视图的用户输入，调用模型进行数据处理，然后更新视图。

MVVM实现步骤

定义模型（Model）：与MVC中的模型类似，负责存储应用的数据。
创建视图（View）：视图负责展示数据和处理用户交互。
实现视图模型（ViewModel）：视图模型是视图的抽象表示，它暴露视图所需的数据和命令，负责处理视图的状态和逻辑，通过数据绑定与视图进行交互。

核心代码

MVC示例代码（以简单的待办事项应用为例）

// 模型
class TodoModel {
    constructor() {
        this.todos = [];
    }

    addTodo(todo) {
        this.todos.push(todo);
    }

    getTodos() {
        return this.todos;
    }
}

// 视图
class TodoView {
    constructor() {
        this.todoList = document.getElementById('todo-list');
        this.addButton = document.getElementById('add-button');
        this.input = document.getElementById('todo-input');
    }

    render(todos) {
        this.todoList.innerHTML = '';
        todos.forEach(todo => {
            const li = document.createElement('li');
            li.textContent = todo;
            this.todoList.appendChild(li);
        });
    }

    bindAddTodo(handler) {
        this.addButton.addEventListener('click', () => {
            const todo = this.input.value;
            if (todo) {
                handler(todo);
                this.input.value = '';
            }
        });
    }
}

// 控制器
class TodoController {
    constructor(model, view) {
        this.model = model;
        this.view = view;

        this.view.bindAddTodo(this.addTodo.bind(this));
        this.updateView();
    }

    addTodo(todo) {
        this.model.addTodo(todo);
        this.updateView();
    }

    updateView() {
        const todos = this.model.getTodos();
        this.view.render(todos);
    }
}

// 初始化
const model = new TodoModel();
const view = new TodoView();
const controller = new TodoController(model, view);

MVVM示例代码（以简单的用户信息编辑页面为例）

// 模型
struct User {
    var name: String
    var email: String
}

// 视图模型
class UserViewModel {
    private var user: User

    var name: String {
        didSet {
            user.name = name
            nameChanged?()
        }
    }

    var email: String {
        didSet {
            user.email = email
            emailChanged?()
        }
    }

    var nameChanged: (() -> Void)?
    var emailChanged: (() -> Void)?

    init(user: User) {
        self.user = user
        self.name = user.name
        self.email = user.email
    }

    func saveProfile() {
        // 模拟保存操作
        print("Profile saved: \(user.name), \(user.email)")
    }
}

// 视图
class UserView {
    var viewModel: UserViewModel

    init(viewModel: UserViewModel) {
        self.viewModel = viewModel

        viewModel.nameChanged = { [weak self] in
            self?.updateName()
        }

        viewModel.emailChanged = { [weak self] in
            self?.updateEmail()
        }
    }

    func updateName() {
        print("Name updated: \(viewModel.name)")
    }

    func updateEmail() {
        print("Email updated: \(viewModel.email)")
    }

    func saveButtonTapped() {
        viewModel.saveProfile()
    }
}

// 初始化
let user = User(name: "John Doe", email: "[email protected]")
let viewModel = UserViewModel(user: user)
let view = UserView(viewModel: viewModel)