关于MVC与MVVM的区别

最新推荐文章于 2023-04-17 20:08:43 发布

Jayhodon

最新推荐文章于 2023-04-17 20:08:43 发布

阅读量165

点赞数 4

本文链接：https://blog.csdn.net/Jayhodon/article/details/108546606

版权

MVC

介绍：

Model View Controller（MVC），即模型(model)、视图(view)、控制器(controller)。它是一种用于开发Web应用程序的软件设计模式、是一种软件设计典范。
它使用业务逻辑、数据、界面显示相互分离的方法来组织代码。简单来说就是控制器(controller) 负责将模型(model) 的数据用视图(view) 显示出来。

M–(Model):

Model，数据模型，比如我们人类有一双手，一双眼睛，一个脑袋，没有尾巴，这就是模型。Model定义了这个模块的数据模型，在代码中体现为数据管理者，负责对数据进行获取及存放。

V–(View):

View，视图，简单来说，就是界面上我们能看见的一切。界面大致上可以分为两个部分，一部分是不会根据数据来更新显示的静态资源，另一部分则是会根据数据来显示内容的。我们使用MVC解决问题的时候，通常是解决这些根据数据来显示内容的视图。

C–(Controller):

Controller，这是最抽象的一个东西。首先，Controller不需要关心Model是如何拿到数据的，只管调用就行了。数据存放的地方是在Model，而使用数据的地方是在Controller，所以Model应该提供接口供controller访问其存放的数据。然而它往往还需要承担起MVC中的数据和视图的协调者，也就是在Controller里面把Model的数据赋值给View来显示（或者是View接收用户输入的数据然后由Controller把这些数据传给Model来保存到本地或者上传到服务器）。

到了这里大概就对MVC有了一定的了解，举个例子：若只使用原生的html+js，我们可以将html看成view、将js看成controller、将js的ajax当做Model。这里js通过ajax从服务器获取数据来处理页面的交互以及响应对html的操作（即根据ajax获取数据的改变，通过js对html进行操作），可以看成 controller调用Model对数据进行操作，完成model与view的同步。

MVVM

介绍：
为了更好的解决MVC 厚重的View Controller 以及较差的可测试性的弊端，于是MVC衍生出了MVVM，其将 Controller 中的展示逻辑抽取出来，放置到一个专门的地方，而这个地方就是 viewModel 。它促进了 UI 代码与业务逻辑的分离。它正式规范了视图和控制器紧耦合的性质，并引入新的组件。
MVVM 的优势：
1.低耦合：View 可以独立于Model变化和修改，一个 viewModel 可以绑定到不同的 View 上
2.可重用性：可以把一些视图逻辑放在一个 viewModel里面，让很多 view 重用这段视图逻辑
3.独立开发：开发人员可以专注于业务逻辑和数据的开发 viewModel，设计人员可以专注于页面设计
4.可测试：通常界面是比较难于测试的，而 MVVM 模式可以针对 viewModel来进行测试
MVVM 与MVC的区别：
在MVVM中，Controller不再像MVC那样可以直接操作Model了。打个比方：若你就是Controller，你的工作便是将Model的数据处理好后给你的上级View----这就是MVC。在这个模式下Model的数据解析就需要由你亲自完成，但实际上你其实只需要将整理好的文件交给你的上级就好了。所以你就拉来了壮丁VM（viewModel）让他来完成数据的处理，当你要将处理好的Model交给View时，你只需要去和VM拿处理好的数据即可—这就是MVVM。
即在MVVM中 C持有着VM， VM持有着M。
使用vue来近一步理解MVVM：

<body>
    <!-- 这个被Vue所控制的div元素区域，就是View 即 MVVM中的 V -->
    <div id="app">
        <p>{{ msg }}</p>
    </div>    
    
    <script>
        // 这里 new 出来的 vm 对象 就是 viewModel 即 MVVM 中的 VM
        var vm = new Vue({
            el: '#app',
            // 这里的data 就是 Model 即 MVVM 中的 M
            data:{
                msg:'我是model中的数据'
            }
        })
    </script>
</body>