MVC和MVVM的区别

<h3 style="text-align: start;">1. MVC</h3><img src="https://jsd.onmicrosoft.cn/gh/iGaoWei/codercdn@master/question/20240627/2024062710060373846.png" alt="https://jsd.onmicrosoft.cn/gh/iGaoWei/codercdn@master/question/20240627/2024062710060373846.png" data-href="" style="">1). Model（模型）是应用程序中用于处理应用程序数据逻辑的部分。 　　通常模型对象负责在数据库中存取数据。2). View（视图）是应用程序中处理数据显示的部分。 　　通常视图是依据模型数据创建的。3). Controller（控制器）是应用程序中处理用户交互的部分。 　　通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。最典型的MVC就是JSP + serverlet + javabean的模式MVC的思想：Controller负责将Model的数据用View显示出来，换句话说就是在Controller里面把Model的数据赋值给View。MVC的特点：实现关注点分离，即应用程序中的数据模型与业务和展示逻辑解耦。就是将模型和视图之间实现代码分离，松散耦合，使之成为一个更容易开发、维护和测试的客户端应用程序。<h4 style="text-align: start;">MVC的优点：</h4>耦合度低，视图层和业务层分离重用度高生命周期成本低可维护性高部署快<h4 style="text-align: start;">MVC的缺点：</h4>不适合小型项目的开发视图与控制器间的过于紧密的连接，视图与控制器是相互分离，但却是联系紧密的部件，妨碍了他们的独立重用降低了视图对模型数据的访问，依据模型操作接口的不同，视图可能需要多次调用才能获得足够的显示数据。对未变化数据的不必要的频繁访问，也将损害操作性能。MVC的应用：主要用于中大型项目的分层开发。<h3 style="text-align: start;">2. MVVM</h3><img src="https://jsd.onmicrosoft.cn/gh/iGaoWei/codercdn@master/question/20240627/2024062710062919693.png" alt="https://jsd.onmicrosoft.cn/gh/iGaoWei/codercdn@master/question/20240627/2024062710062919693.png" data-href="" style="">1). M： Model模型, 也就是包含数据的js对象(只包含属性, 不包含方法)2). V： View视图，动态显示模型对象中的数据显示界面3). VM： ViewModel视图模型, 本质是一个vm, 通过vm读取model中的数据显示到view上, 同时view输入数据改变, vm也可以将输入数据保存到model中MVVM的优势: 不用亲自操作DOM, 数据是响应式的, 一旦数据变化, 自动更新界面MVVM的特点： 在MVVM的框架下，视图和模型是不能直接通信的，它们通过ViewModal来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。<h4 style="text-align: start;">MVVM的优点：</h4>MVVM模式的主要目的是分离视图(View)和模型(Model)，有几大优点：低耦合，视图(View)可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。可重用性，可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。独立开发，开发人员可以专注于业务逻辑和数据的开发(ViewModel)，设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xml代码。可测试，界面向来是比较难于测试的，而现在测试可以针对ViewModel来写双向数据绑定，它实现了View和Model的自动同步，当Model的属性改变时，不需要手动操作Dom元素，来改变View的显示，而是改变属性后该属性对应View层显示会自动改变MVVM适用场景： 适合数据驱动的场景，数据操作比较多的场景

DreamCoders/CoderGuide

内容风险标识

评论 (0)

DreamCoders/CoderGuide .gitee-modal { width: 500px !important; }

内容风险标识