前端框架Vue的MVVM模式的理解

目录

拆解MVVM

​一句话理解MVVM:

MVVM出现的作用

MVVC中的VM层的作用

---

拆解MVVM

MVVM是Model-View-ViewModel的简写,即模型层-视图层-视图模型层,与后端MVC模式相比,就是把C(控制层)替换成了VM(ViewModel)层,所以其本质上就是MVC的改进版.

M(Model模型层):主要负责数据相关业务.

V(View视图层):负责视图相关业务,比如网页的Dom.

VM(ViewModel视图模型层):是Model层和View层交互的桥梁,负责监听M然后对V进行修改,实现M和V的双向绑定.当M层的数据发生修改时,VM层会监测到变化然后立马对V层的数据也进行修改,进而实现数据的双向绑定.反之当V层的数据发生修改时,VM层也会监测到变化然后对M层的数据进行修改.

也就是说,Model层和View层不会直接相互操作,而是通过VM层进行互相联系,从而降低了耦合.

一句话理解MVVM:

VM层(视图模型层)通过接口从后台M层(Model)请求数据,VM层继而和V(View层)实现数据的双向绑定.

MVVM出现的作用

1.提高前端开发的效率:促进了GUI前端开发与后端业务逻辑的分离,极大地提高了前端的开发效率.

2.接口实现前后端分离:MVVM用接口实现了前后端数据的通信,可以分离前后端之间的业务逻辑.

MVVM模式的主要目的就是分离视图层和模型层,这样做的好处是:

1. 低耦合.视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
2. 可重用性.可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
3. 独立开发.开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计.
4. 可测性.界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

MVVM中的VM层的作用

ViewModel是由前端开发人员组织生成和维护的视图数据层.在这一层,前端开发者对从后端获取的Model数据进行转换处理,做二次封装,以生成符合View层使用的预期视图数据模型.需要注意的是ViewModel所封装出来的数据模型包括视图的状态和行为两部分,而Model层的数据模型是只包含状态的,比如页面的这一块展示什么，那一块展示什么这些都属于视图状态（展示），而页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为（交互）,视图状态和行为都封装在了ViewModel里.这样的封装就使得ViewModel可以完整的去描述View层.由于实现了数据的双向绑定,ViewModel的内容会实时展现在View层,这是最重要的一点,因为前端开发者再也不必低效又麻烦的通过操作DOM去更新视图,MVVM框架已经把最脏最累的活做好了,开发者只需要维护和处理ViewModel,只要更新了数据,视图就会得到相应的更新,真正实现数据驱动开发.总之,View层展现的不是Model层的数据,而是ViewModel的数据,由ViewModel负责与Model层进行交互,这就完全解耦了View层和Model层,也正因为如此,它才实现了前后端的分离,从而极大地提高了前端的开发效率.