MVC和MVVM的区别

已于 2024-09-27 11:27:06 修改
阅读量1.3k 收藏 22
点赞数 21
文章标签： mvc
于 2024-09-27 11:26:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48806446/article/details/142589129
版权

MVC和MVVM的区别

MVC（Model-View-Controller）和 MVVM（Model-View-ViewModel）都是设计模式，用于帮助开发人员更好地组织和管理应用程序的代码。尽管它们在名称上有相似之处，但在实现细节和适用场景上有所不同。

MVC（Model-View-Controller）

组件

1、Model（模型）

○ 负责管理应用程序的数据和业务逻辑。
○ 包括数据访问和数据处理逻辑。

2、View（视图）

○ 负责展示数据。
○ 通常是指用户界面（UI）。

3、Controller（控制器）

○ 负责处理用户的输入，并将数据传递给 Model 层进行处理。
○ 控制器还负责更新 View 层的状态。

工作流程

● 用户与 View 交互。
● Controller 接收到用户的输入，并调用 Model 层的方法。
● Model 层处理数据，并将结果返回给 Controller。
● Controller 更新 View 层的状态，使其反映新的数据状态。

特点

● 数据流：通常是单向的，即从 View 到 Controller 再到 Model，最后再返回到 View。
● 依赖关系：View 依赖于 Controller，Controller 依赖于 Model。
● 测试性：Controller 和 Model 较容易测试，因为它们不依赖于具体的 UI 实现。

MVVM（Model-View-ViewModel）

组件

  1. Model（模型）
    ○ 与 MVC 中的 Model 相同，负责管理应用程序的数据和业务逻辑。
  2. View（视图）
    ○ 负责展示数据。
    ○ 通常是指用户界面（UI），但不直接与 Model 交互。
  3. ViewModel（视图模型）
    ○ 作为 Model 和 View 之间的桥梁。
    ○ ViewModel 负责将数据转换成适合在 View 上展示的形式，并且提供了 View 所需的命令和属性。
    ○ ViewModel 通常包含数据绑定所需的属性和方法。

工作流程

● 用户与 View 交互。
● View 通过数据绑定直接与 ViewModel 交互。
● ViewModel 负责与 Model 层进行数据交换，并处理业务逻辑。
● ViewModel 的数据变化会自动反映到 View 上，反之亦然。
特点
● 数据绑定：MVVM 强调数据绑定，即 View 和 ViewModel 之间的数据是双向绑定的。
● 依赖关系：View 依赖于 ViewModel，ViewModel 依赖于 Model。
● 测试性：ViewModel 更容易进行单元测试，因为它不依赖于具体的 UI 实现。

主要区别

  1. 数据绑定方式
    ○ MVC：视图和模型之间的通信通常是通过控制器进行的。
    ○ MVVM：视图和视图模型之间使用数据绑定来实现，这意味着视图模型中的数据更直接地影响到视图的显示。
  2. 分工
    ○ MVC：Controller 负责处理用户交互和协调 Model 和 View 之间的通信。
    ○ MVVM：ViewModel 类似于 Controller，但它更关注于视图和模型之间的数据绑定和交互。
  3. 可重用性
    ○ MVVM：由于 ViewModel 的存在，视图和 ViewModel 之间的解耦更好，这使得 ViewModel 可以在不同的视图之间重用，从而提高了代码的可重用性和可维护性。
  4. 测试性
    ○ MVVM：相对于 MVC 更容易进行单元测试。视图和 ViewModel 之间的解耦以及数据绑定使得可以更容易地模拟 ViewModel 的行为并进行测试。
    实际应用中的选择
    ● Web 开发：在前端 Web 开发中，MVVM 模式更为常见，特别是在使用 Vue.js、Angular 和 React 等现代前端框架时。
    ● 桌面应用：MVC 模式在桌面应用中仍然非常普遍，尤其是在 Java Swing 和 .NET WinForms/WPF 中。
    通过理解这些模式的不同特点，你可以根据项目的具体需求选择最适合的设计模式。
    补充
    要快速地区分 MVC（Model-View-Controller）和 MVVM（Model-View-ViewModel）模式，可以从以下几个方面入手：
  5. 核心组件
    ● MVC
    ○ Model：管理数据和业务逻辑。
    ○ View：展示数据，接收用户输入。
    ○ Controller：处理用户输入，控制 Model 和 View 之间的交互。
    ● MVVM
    ○ Model：管理数据和业务逻辑。
    ○ View：展示数据，接收用户输入，但不直接与 Model 交互。
    ○ ViewModel：作为 Model 和 View 之间的桥梁，处理数据绑定和业务逻辑。
  6. 数据绑定
    ● MVC
    ○ 数据绑定通常是手动的。当用户与 View 交互时，Controller 会捕获这些事件，并调用 Model 层的方法来更新数据，然后更新 View。
    ● MVVM
    ○ 数据绑定是自动的。ViewModel 通过数据绑定机制与 View 进行交互，当 ViewModel 中的数据发生变化时，View 会自动更新；反之亦然。
  7. 用户交互处理
    ● MVC
    ○ 用户交互通常由 Controller 处理。Controller 负责接收用户的输入，并决定如何更新 Model 和 View。
    ● MVVM
    ○ 用户交互直接通过 ViewModel 处理。ViewModel 提供了属性和命令，这些属性和命令通过数据绑定与 View 进行交互。
  8. 测试性
    ● MVC
    ○ Controller 和 Model 层相对容易测试，因为它们不依赖于具体的 UI 实现。
    ● MVVM
    ○ ViewModel 层更容易测试，因为它不直接依赖于 UI，可以通过模拟数据来测试 ViewModel 的逻辑。
  9. 代码示例
    为了更好地理解这两种模式，以下是一些简单的代码示例：

MVC 示例

// Model

public class User {
    private String username;
    private String password;

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }}

// View

public class LoginView {
    private JTextField usernameField;
    private JPasswordField passwordField;
    private JButton loginButton;

    public LoginView() {
        // 初始化界面组件
        usernameField = new JTextField();
        passwordField = new JPasswordField();
        loginButton = new JButton("Login");

        // 设置布局和事件监听器
        JPanel panel = new JPanel(new GridLayout(3, 1));
        panel.add(new JLabel("Username:"));
        panel.add(usernameField);
        panel.add(new JLabel("Password:"));
        panel.add(passwordField);
        panel.add(loginButton);

        JFrame frame = new JFrame("Login Form");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.add(panel);
        frame.pack();
        frame.setVisible(true);
    }
}

// Controller

public class LoginController {
    private User user;
    private LoginView loginView;

    public LoginController(User user, LoginView loginView) {
        this.user = user;
        this.loginView = loginView;

        loginView.getLoginButton().addActionListener(e -> handleLogin());
    }

    private void handleLogin() {
        String username = loginView.getUsernameField().getText();
        String password = new String(loginView.getPasswordField().getPassword());

        user.setUsername(username);
        user.setPassword(password);

        if (user.getUsername().equals("admin") && user.getPassword().equals("password")) {
            JOptionPane.showMessageDialog(loginView, "Login successful!");
        } else {
            JOptionPane.showMessageDialog(loginView, "Invalid credentials.");
        }
    }
}

MVVM 示例

// Model

public class User {
    private String username;
    private String password;

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }
}

// ViewModel

 public class LoginViewModel {
    private User user = new User();

    public String getUsername() {
        return user.getUsername();
    }

    public void setUsername(String username) {
        user.setUsername(username);
    }

    public String getPassword() {
        return user.getPassword();
    }

    public void setPassword(String password) {
        user.setPassword(password);
    }

    public void login() {
        if (user.getUsername().equals("admin") && user.getPassword().equals("password")) {
            JOptionPane.showMessageDialog(null, "Login successful!");
        } else {
            JOptionPane.showMessageDialog(null, "Invalid credentials.");
        }
    }
}

// View

public class LoginView extends JFrame {
    private LoginViewModel viewModel;
    private JTextField usernameField;
    private JPasswordField passwordField;
    private JButton loginButton;

    public LoginView(LoginViewModel viewModel) {
        this.viewModel = viewModel;

        // 初始化界面组件
        usernameField = new JTextField();
        passwordField = new JPasswordField();
        loginButton = new JButton("Login");

        // 设置布局和事件监听器
        JPanel panel = new JPanel(new GridLayout(3, 1));
        panel.add(new JLabel("Username:"));
        panel.add(usernameField);
        panel.add(new JLabel("Password:"));
        panel.add(passwordField);
        panel.add(loginButton);

        add(panel);
        pack();
        setVisible(true);

        // 数据绑定
        usernameField.setText(viewModel.getUsername());
        passwordField.setText(viewModel.getPassword());

        usernameField.getDocument().addDocumentListener(new DocumentListener() {
            @Override
            public void insertUpdate(DocumentEvent e) {
                viewModel.setUsername(usernameField.getText());
            }

            @Override
            public void removeUpdate(DocumentEvent e) {
                viewModel.setUsername(usernameField.getText());
            }

            @Override
            public void changedUpdate(DocumentEvent e) {
                viewModel.setUsername(usernameField.getText());
            }
        });

        passwordField.getDocument().addDocumentListener(new DocumentListener() {
            @Override
            public void insertUpdate(DocumentEvent e) {
                viewModel.setPassword(new String(passwordField.getPassword()));
            }

            @Override
            public void removeUpdate(DocumentEvent e) {
                viewModel.setPassword(new String(passwordField.getPassword()));
            }

            @Override
            public void changedUpdate(DocumentEvent e) {
                viewModel.setPassword(new String(passwordField.getPassword()));
            }
        });

        loginButton.addActionListener(e -> viewModel.login());
    }
}

总结
● MVC：强调控制器的作用，视图和模型之间的交互需要通过控制器来完成。
● MVVM：强调数据绑定，视图和视图模型之间的交互是自动的，通过数据绑定机制实现。

lmr_
关注
面试题：MVC和MVVM的区别
m0_69287579的博客
07-27 551
因为Model层中的数据不能直接跟View中的视图控件一一对应，所以就需要ViewModel来将Model封装成View可以接收和显示的界面数据对象。还有一种设计架构叫做MVP，是MVC的一个演变模式，它将Controller换成了Presenter，Presenter负责完成View于Model间的交互，主要是解决了上述的第一个缺点，但第二个缺点依旧没有解决。V（View）：视图层，应用程序中用来显示数据的部分，视图可以显示模型层查出来的数据，一般就是我们见到的用户界面，客户想看到的。
MVC和MVVM详解
热门推荐
DH's Den
04-22 2万+
请预留足够的时间，您将看到大量的文字描述。但是相信我，您绝对值得花时间在这些文字描述上面。我已经尽了我最大所能来阐述关于MVC和MVVM如此这般设计的原因以及我们应该如何思考一些相关的问题
MVVM和MVC 的区别
weixin_55696461的博客
09-28 6726
因为 model层中的数据往往是不能直接跟 view 中的控件一一对应上的，所以需要在定义一个数据对象专门对应 view 上的控件，而 viewModel 就是把 model 对象封装成可以显示和接受输入的界面数据对象。C(Controller): 控制层，是应用程序中处理用户交互的部分，控制器接受用户的输入并调用模型和视图去完成用户的需求，控制器本身不输出任何东西和做任何处理，它只是接收请求并决定调用那个模型构建去处理请求，然后在确定用哪个视图来显示返回的数据。展示出来的用户界面。
计算机基础——MVVM和MVC的区别和详解
最新发布
蜡笔不新的博客
12-26 1051
MVVM和MVC的区别，双向数据绑定的原理详解
MVC，MVP 和 MVVM 的图示
swust_chenpeng的专栏
02-13 1003
地址：http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html 复杂的软件必须有清晰合理的架构，否则无法开发和维护。 MVC（Model-View-Controller）是最常见的软件架构之一，业界有着广泛应用。它本身很容易理解，但是要讲清楚，它与衍生的 MVP 和 MVVM 架构的区别就不容易了。 昨天晚上，我读了《Sc
MVC的优缺点
Jackson0328的博客
11-18 1312
MVC的优点： 1.耦合性低 视图层和业务层分离，这样就允许更改视图层代码而不用重新编译模型和控制器代码，同样，一个应用的业务流程或者业务规则的改变只需要改动MVC的模型层即可。因为模型与控制器和视图相分离，所以很容易改变应用程序的数据层和业务规则。 2.重用性高 MVC模式允许使用各种不同样式的视图来访问同一个服务器端的代码，因为多个视图能共享一个模型，它包括任何WEB（HTTP）浏览器或者无线浏览器（wap），比如，用户可以通过电脑也可通过手机来订购某样产品，虽然订购的方式不一样，但处理订购产品的方式.
MVC和MVVM
weixin_30650859的博客
03-15 940
1.在看mvc和mvvm的区别之前我们来看一下前端的发展历史 在上个世纪的1989年，欧洲核子研究中心的物理学家Tim Berners-Lee发明了超文本标记语言（HyperText Markup Language），简称HTML，并在1993年成为互联网草案。从此，互联网开始迅速商业化，诞生了一大批商业网站。 最早的HTML页面是完全静态的网页，它们是预先编写好的存放在Web服务器上的h...
​MVC与MVVM区别？
FocusOnLovingFreedom的博客
11-18 642
​ 在MVC里，View是可以直接访问Model的！从而，View里会包含Model信息，不可避免的还要包括一些业务逻辑。 MVC模型关注的是Model的不变，所以，在MVC模型里，Model不依赖于View，但是 View是依赖于Model的。不仅如此，因为有一些业务逻辑在View里实现了，导致要更改View也是比较困难的，至少那些业务逻辑是无法重用的。 　　MVVM在概念上是真正将页面与数
mvvm和mvc
田兴的博客
01-14 5061
mvvm 概念：MVVM是 Model-View-ViewModel 的缩写，分别对应着：数据，视图，视图模型。Model是我们应用中的数据模型，View是我们的UI视图层，通过ViewModle，可以把我们Modle中的数据映射到View视图上，同时，在View层修改了一些数据，也会反应更新我们的Modle。简单理解就是双向数据绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候...
谈谈MVC和MVVM1
08-08
MVC 和 MVVM 模式详解 在软件开发中，MVC（Model-View-Controller）和 MVVM（Model-View-ViewModel）是两个非常重要的设计模式，它们都是为了解决软件系统中的耦合性和可维护性问题而设计的。在本文中，我们将详细...
mvc和mvvm的区别
Astrid_Doraemon的博客
03-26 2010
1.mvc和mvvm的区别 1.1认识mvc的含义 MVC全名是Model View Controller，其中Model(模型层)，View(视图层)，Controlle(控制层)。 MVC框架模式图 1.2mvc模式 Model(模型) ：处理应用程序核心比如 数据库。 View(视图)：显示效果即html页面 Controller(控制)：处理业务相关的逻辑 优点 耦合性低 视图层和业务层分离，这样就允许更改视图层代码而不用重新编译模型和控制器代码，同样，一个应用的...
MVC和MVVM【区别和详解】
m0_60150712的博客
08-06 1011
MVC(Model View Controller)是一种比较直观的软件设计的框架模式，采用用户操作（Model）—View（负责接收用户的输入操作）— Controller（业务逻辑处理）— Model（数据持久化）— View（将结果反馈给View）。2、MVVM与MVC最大的区别就是：它实现了View和Model的自动同步：当Model的属性改变时，我们不用再自己手动操作Dom元素来改变View的显示，它会自动变化。视图（View）：与 MVC 中的视图相似，负责用户界面的展示和呈现。
MVC和MVVM的区别和联系
joy_zhuo_的博客
10-12 382
MVVM 即 Model-View-ViewModel 的简写，即模型-视图-视图模型，模型。需要大量操作 DOM 元素时，采用 MVVM 的开发方式，会更加便捷，让开发者更多的精。vue 数据驱动，通过数据来显示视图层而不是节点操作， 场景：数据操作比较多的场景，（Model） 指的是后端传递的数据，视图(View)指的是所看到的页面，视图模型。实现的方式是：DOM 事件监听，这两个方向都实现的，我们称之为数据的双向绑定。现的是业务逻辑组件的重用， 使开发更高效，结构更清晰，增加代码的复用性。
MVVM和MVC的区别？
qq_42115981的博客
05-21 2396
一、MVVM是Model（数据层）-View（视图层）-ViewModel（视图模板）的简写。本质上是MVC的改进版，MVVM就是将VIew中的状态和行为抽象化，将视图中的UI和逻辑分离，view除了定义结构、布局外，他展示的的事ViewModel层的数据和状态，不负责处理状态，VIew层做的是数据绑定、指令的声明、事件的绑定声明。VIewModel相当于MVC里的C（Controller控制器）...
学php用mvc和mvvm哪个好用,MVVM和MVC有什么区别
weixin_39622084的博客
04-02 302
MVVM与MVC的区别有：1、mvvm各部分的通信是双向的，而mvc各部分通信是单向的；2、mvvm是真正将页面与数据逻辑分离放到js里去实现，而mvc里面未分离。【推荐教程：MVC教程】MVCMVC是包括view视图层、controller控制层、model数据层。各部分之间的通信都是单向的。View 传送指令到 ControllerController 完成业务逻辑后，要求 Model 改变状...
Mvvm 与 mvc 的区别
yzkdcsdn的博客
11-18 6132
Mvvm 与 mvc 的区别MVVMMVC两者在思想上的区别 MVVM MVVM 分为三部分：分别是 M（Model，模型层），V（View，视图层），V（ViewModel，V 与 M 连接的桥梁，也可以看作为控制器MVC 的 C 层） 1、M：模型层，主要负责业务数据相关 2、V：视图层，负责视图相关，细分下来就是 html+css 层 3、VM：V 与 M 沟通的桥梁，负责监听 M 或者 V 的修改，是实现MVVM 双向绑定的要点；因此开发者只需关注业务逻辑，不需要手动操作 DOM，不需要关注数据状态
mvvm和mvc的区别是什么？
m0_62241283的博客
07-27 928
本篇文章的主要内容是讲述MVC与MVVM的区别，希望能对你有所帮助。他们之间的区别主要是MVC中Controller（控制层）演变成了MVVM中的viewModel（双向数据绑定）。MVVM主要解决了MVC中大量的DOM操作带来的问题。MVVM中当和Model频繁发生变化，开发者需要主动更新到View。
MVC 和 MVVM 区别
05-26
MVC（Model-View-Controller）和MVVM（Model-View-ViewModel）都是常用的前端架构模式，它们的主要区别在于： 1. 数据绑定方式不同：在MVC中，视图和模型之间的通信是单向的，即视图可以向控制器发送请求，但是控制器不能直接向视图发送数据。在MVVM中，视图和模型之间是双向绑定的，即视图的改变会自动更新模型，模型的改变也会自动更新视图。 2. 视图模型的引入：MVVM模式引入了视图模型（ViewModel）的概念，它作为视图和模型之间的媒介，将视图需要的数据从模型中抽取出来，并且处理视图的事件，将事件传递给模型。这样，视图就可以通过视图模型直接访问模型数据，而不需要和模型直接交互。 3. 控制器的角色不同：在MVC中，控制器负责处理视图的事件和数据，然后将处理结果传递给视图和模型。而在MVVM中，控制器的角色被视图模型所取代，视图模型负责处理视图的事件和数据，然后将处理结果传递给模型和视图。 总的来说，MVC模式更加简单和直观，MVVM模式则更加灵活和可维护，但是需要更多的学习成本和工作量。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值