什么是MVVM？MVC、MVP与MVVM模式的区别？

BJYXSZD-91852024-02-20 8:28

MVVM（Model-View-ViewModel）是一种软件架构模式，用于将用户界面（View）与业务逻辑（Model）分离，并通过ViewModel来连接两者。MVVM的目标是实现可测试性、可维护性和可复用性。

MVC（Model-View-Controller）是另一种常见的软件架构模式，它将应用程序分为三个主要部分：模型（Model）、视图（View）和控制器（Controller）。MVC模式中，Controller负责处理用户交互和调度业务逻辑，View负责显示数据，Model负责数据的存储和逻辑处理。

MVP（Model-View-Presenter）也是一种软件架构模式，类似于MVC，但将View和Model的交互逻辑抽象到了Presenter中。在MVP中，View负责展示数据和接收用户输入，Presenter负责处理用户输入并更新View和Model。

相比于MVC和MVP，MVVM模式将View和ViewModel关联起来，通过双向数据绑定实现View和ViewModel的同步更新。View负责展示数据和用户交互，ViewModel负责处理数据和业务逻辑，Model负责存储数据。MVVM的优点是能够降低View和ViewModel之间的耦合，使得代码更加可维护和可测试。

以下是一个简单的MVVM模式的代码实例（使用JavaScript）：

Model：

javascript 复制代码

class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

ViewModel：

javascript 复制代码

class UserViewModel {
  constructor(user) {
    this.user = user;
  }
  
  get name() {
    return this.user.name;
  }
  
  set name(value) {
    this.user.name = value;
  }
  
  get age() {
    return this.user.age;
  }
  
  set age(value) {
    this.user.age = value;
  }
}

View：

html 复制代码

<input type="text" data-bind="value: name">
<input type="number" data-bind="value: age">

<h1 data-bind="text: name"></h1>
<p data-bind="text: age"></p>

这个示例中，View通过data-bind属性和ViewModel进行双向数据绑定，当用户在输入框中输入内容时，ViewModel中的属性会更新，反之亦然。View也通过data-bind属性来展示ViewModel中的属性。