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.逻辑和视图的独立，可增加逻辑的可重用性。