MVVM模式直白解析

MVVM模式最早是由微软提出来的,MVVM代表:Model---View---ViewModel

这里的ViewModel我们可以简单理解为页面上所显示内容的数据抽象,也可把它看做的一个弱的Controller。

MVVM模式关系图解

在ViewModel中有一个交Binder的东西,view和model之间的数据同步的操作都是交由Binder处理,你只需要在view的模板语法中指令式的声明view上显示的内容与Model中的哪块数据绑定即可,当Viewmodel进行Model更新的时候(例如ajax请求数据),Binder会自动的吧数据渲染到view上面,当用户进行操纵的时候(例如表单输入),Binder也会把数据更新到Model上,这种方式叫数据的双向绑定。

也就是说MVVM模式把view和model数据同步的操作自动化了,提供了双向绑定的机制,现在流行的Angular以及vue都是按此模式实现数据的双向绑定,这里需要说明的是同样现在很流行react框架并不是MVVM的框架,他只能算一个view层,它的数据绑定是单向的。

MVVM的优缺点:

优点:① 解决了view层和model层数据自动同步的问题,提供了数据的双向绑定。

②  简化了测试,同步逻辑交给了Binder去处理,view和model层变成了只是纯数据的概念,并且二者的数据一致,只需要保证model层的数据正确,那么view层的数据也正确。大大减少了对view的同步更新的测试

缺点:①  大型的项目,视图状态较多的话,ViewModel会变得很冗杂,ViewModel构建和维护                     的成本会比较高。

             ② 数据绑定的声明时指令式的写在view模板中,没法打断点去debug.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容