MVC与MVVM模式的区别

news2024/12/23 13:12:18

一、MVC

Model（模型）：用于处理应用程序数据逻辑，负责在数据库中存取数据。处理数据的crud

View（视图）：处理数据显示的部分。通常视图是依据模型数据创建的。

Controller（控制器）：处理数据显示的部分，控制器负责从视图读取数据，控制用户输入，并将数据发送给模型。一般包括业务处理模块和router路由模块

二、 M VVM——视图模型双向绑定

Model：模型层：用于处理业务逻辑和与服务器端进行交互

View：视图层：用于将数据模型转化为UI展示出来，简单来说就是html页面

ViewModel：视图模型层：框架封装的核心，它负责将数据与视图关联起来

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

三、区别

MVVM 与 MVC 最大的区别就是：

MVVM实现了View和Model的自动同步，当Model属性改变时，不用手动操作Dom元素去改变View的显示。而改变属性后，该属性对应View的显示会自动改变

四、延伸：

阐述一下你所理解的MVVM响应式原理

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