MVVM

作者：文刀刘
链接：https://zhuanlan.zhihu.com/p/163223714
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

1.mvvm 框架是什么？定义：M：Model（服务器上的业务逻辑操作) V：View（页面）VM：ViewModel（Model与View之间核心枢纽，比如Vue.js）
大体上：vm层（视图模型层）通过接口从后台m层（model层）请求数据，vm层继而和v（view层）实现数据的双向绑定。
三者关系：Model与ViewModel之间的双向关系Model 通过Ajax通信，发送数据给ViewModel。ViewModel也可以通过Ajax通信，发送请求给Model。
ViewModel与View之间的双向关系ViewModel中的数据改变，可以同时改变View上的显示内容。View上的内容改变(比如输入框中的内容)，也可以同时改变ViewModel中对应的数据。

前端框架MVVM出现的最大意义是什么：mvvm层实现了前后端更好的分离（前端需要的数据只需要请求后端的接口即可）MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离，极大地提高了前端开发效率。MVVM用接口实现了前后端数据的通信，这样可以使前后端之间的业务逻辑没有什么关系。MVVM在感觉上要比mvc模式前后端要分的更开前端框架MVVM中的vm层是干嘛的ViewModel 是由前端开发人员组织生成和维护的视图数据层。在这一层，前端开发者对从后端获取的 Model 数据进行转换处理，做二次封装，以生成符合 View 层使用预期的视图数据模型。需要注意的是 ViewModel 所封装出来的数据模型包括视图的状态和行为两部分，而 Model 层的数据模型是只包含状态的，比如页面的这一块展示什么，那一块展示什么这些都属于视图状态（展示），而页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为（交互），视图状态和行为都封装在了 ViewModel 里。这样的封装使得 ViewModel 可以完整地去描述 View 层。由于实现了双向绑定，ViewModel 的内容会实时展现在 View 层，这是激动人心的，因为前端开发者再也不必低效又麻烦地通过操纵 DOM 去更新视图，MVVM 框架已经把最脏最累的一块做好了，我们开发者只需要处理和维护 ViewModel，更新数据视图就会自动得到相应更新，真正实现数据驱动开发。看到了吧，View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与 Model 层交互，这就完全解耦了 View 层和 Model 层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环。View一般就是我们平常说的HTML文本的Js模板，里面可以嵌入一些js模板的代码，比如Mustache，比如jstl类似的模板伪代码ViewModule层里面就是我们对于这个视图区域的一切js可视业务逻辑，举个例子，比如图片走马灯特效，比如表单按钮点击提交，这些自定义事件的注册和处理逻辑都写在ViewModule里面了Module就更简单了，就是对于纯数据的处理，比如增删改查，与后台CGI做交互