MVVM开发模式
MVVM分为Model、View、ViewModel三者。
是什么
-
Model:代表数据模型,数据和业务逻辑都在Model层中定义;
-
View:代表UI视图,负责数据的展示;
-
ViewModel:核心通过(v层数据)双向数据绑定实现M层,和v层交互的代理。原理:1.对数据绑定,当m层数据变化时,自动更新到v(视图层)
- 2.对dom的事件监听,将视图中的数据变化自动更新M层
Model和View并无直接关联,而是通过ViewModel来进行联系的,Model和ViewModel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新,View中由于用户交互操作而改变的数据也会在Model中同步。
优点:
1.双向绑定技术,使开发者只需关注Model(数据)的变化,让MVVM框架去自动更新DOM的状态,从而使发者无需处理dom的操作!
2.将控制器的功能大都移动到View上处理,大大的对控制器进行了瘦身。
3.视图和逻辑的解耦:视图(View)可以独立于Model
4.可重用:一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑
缺点
1.Bug很难被调试,由于双向数据绑定使定位错误变的复杂,另外数据绑定的声明是指令式地写在View的模版当中的,这些内容是没办法去打断点debug的
2.数据绑定的声明是指令式地写在View的模版当中的,这些内容是没办法去打断点debug的
3.在vue中通过v-model实现双向数据绑定,数据同步从视图——模型通过事件监听实现,数据从模型到视图通过数据绑定,即数据填充。
mvc和mvvm的区别
1.mvc的Controller(控制器) 简单的理解:视图请求操作数据,将请求发送至控制器,控制器再将请求发送给模型,模型去查找数据,找到之后传给控制器,控制器再传给视图进行渲染。
而mvvm中的vm层是双向数据绑定:当视图请求操作数据,mv对m层和v层两端都有监听操作,通过数据劫持,和发布订阅者实现双向数据绑定。
MVVM主要解决了MVC中大量的dom操作使页面渲染性能降低,加载速度变慢,影响用户体验
2.视图和逻辑的解耦:视图(View)可以独立于Model,让开发变的更加简便及可维护
3.逻辑和视图的独立,可增加逻辑的可重用性。