MVVM、MVC与三层架构

说明

MVC、MVVM与三层架构概念笔记总结

三层架构

三层架构是指：视图层view（表现层），服务层service（业务逻辑层），持久层Dao（数据访问层）

1.view层： 用于显示数据和接收用户输入的数据，为用户提供一种交互式操作的界面。主要作用是界面展示，接收请求，分发请求。

2.service层：实现业务的主要逻辑，是系统架构中体现核心价值的部分。将一个业务中所有的操作封装成一个方法，同时保证方法中所有的数据库更新操作，即保证同时成功或同时失败。避免部分成功部分失败引起的数据混乱操作。

3.Dao层：也称为是持久层，其功能主要是负责数据库的访问（可以访问数据库、二进制文件、文本文件等），是对数据库，而不是对数据的操作。简单的说法就是实现对数据表的Select，Insert，Update，Delete的操作。如果要加入ORM的元素，那么就会包括对象和数据表之间的mapping，以及对象实体的持久化。也就是哪个类对应哪个表，哪个属性对应哪个列。持久层的目的就是，完成对象数据和关系数据的转换。

MVC

MVC 是在三层架构的基础上设计的一种框架型架构，三层架构是一种宏观的概念，而 MVC 就是一种比较具体的三层架构的框架实现

MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。

• Model（模型）

  编写程序应用功能（实现算法等等），数据库管理，也就是实体类。用于数据的封装和数据的传输

• View（视图）

  显示效果（HTML页面）。是应用程序中处理数据显示的部分。通常视图是依据模型数据创建的。视图层，前端

• Controller（控制器）

  处理输入（业务逻辑）。是应用程序中处理用户交互的部分。**控制器负责从视图读取数据，控制用户输入，并将数据发送给模型。**一般包括业务处理模块和router路由模块，对请求进行处理，负责请求转发，也就是事件，用于流程的控制

MVC框架的工作流程：

1.用户通过View页面向服务端提出请求，可以是表单请求、超链接请求、AJAX请求等。

2.服务端Controller控制器接收到请求后对请求进行解析，找到相应 的Model对用户请求进行处理。

3.Model处理后，将处理结果再交给Controller

4.Controller在接到处理结果后，根据处理结果找到要作为向客户端发回的响应View页面。页面经渲染（数据填充）后，再发送给客户端

MVC优点：

• 耦合度低（运用MVC的应用程序的三个部件是相互独立的，改变其中一个不会影响其他两个）；
• 重用性高（多个视图可以使用同一个模型）
• 生命周期成本低
• 部署快（业务分工明确）
• 可维护性高

MVC缺点：

• 不适合小型项目开发
• 视图与控制器联系过于紧密，妨碍了它们的独立重用

MVVM

MVVM由Model，View，ViewModel三部分构成。

• Model

  代表数据模型（Vue的data），数据和业务逻辑都在Model层中定义；

• View

  代表UI视图，负责数据的展示（Vue的el）

• ViewModel

  是一个对象，负责监听 Model 中数据的改变并且控制View视图的更新，处理用户交互操作；

Model 和 View 并无直接关联，而是通过 ViewModel 来进行交互的（即双向数据绑定），

Model 和 ViewModel之间有着双向数据绑定的联系。 View的变化可以引起Model的变化，Model的变化也可以引起View变化（类似于浅拷贝）。ViewModel是View和Model层的桥梁，数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据。

MVVM与MVC区别

1. mvc中Model和View是可以直接打交道的，造成Model层和View层之间的耦合度高。而mvvm中Model和View不直接交互，而是通过中间桥梁ViewModel来同步
2. mvvm 通过数据来驱动视图层的显示而不是节点操作。当Model属性改变时，不用手动操作Dom元素去改变View的显示

MVVM响应式原理

• vue2是采用数据劫持配合发布者-订阅者的模式的方式
  • 通过Object.defineProperty()来劫持各个属性的getter和setter，
  • 在数据变动时，发布消息给依赖收集器（dep中的subs），去通知（notify）观察者，做出对应的回调函数，更新视图
• MVVM作为绑定的入口，整合Observer,Compile和Watcher三者，
  • 通过Observer来监听model数据变化，
  • 通过Compile来解析编译模板指令，
  • 最终利用Watcher搭起Observer，Compile之间的通信桥路，
  • 达到数据变化Observer）=>视图更新；视图交互变化=>数据model变更的双向绑定效果。

参考

MVC与MVVM模式的区别 - 掘金 (juejin.cn) (opens new window)

MVC、MVVM模式的概念与区别 - 理想三旬· - 博客园 (cnblogs.com) (opens new window)

浅谈MVVM架构 - 掘金 (juejin.cn) (opens new window)

SSM，三层结构，MVC三者的说明及关系(很全面)_mvc各个模块_小群 Carl Tong的博客-CSDN博客 (opens new window)