前端学习——MVVM模型

MVVM模型也就是model-view-viewmodel,数据-视图-视图数据，MVVM模型采用的是模块化的设计思想，其出自于谷歌的angular前端框架，angular采用了MVC模型的模块化开发思想，而MVVM就是MVC模型的变种。

MVC模型就是model-view-controller，请求过程是用户通过view层向controller层发起请求，controller层调用model模型进行数据处理并返回。如下图所示：

而MVVM模型是用vm代替controller的角色，因为视图显示和数据是分离的，比如用户详情页的样式是固定的，但每个看到的用户详情是不一样的，这就是视图和数据的分离。

但在具体的业务需求中，视图数据的改变需要保存到model中，model中数据的改变也要显示在视图中。所以采用viewmodel作为view和model之间数据绑定的一个中间人。简单来说就是，view就是球赛中的分数显示屏，model是不断变化的分数，而viewmodel就是记分员，每当某个球队得分时，记分员就要把显示屏上的分数给改掉。viewmodel就相当于一个中介或传话筒的角色。

在vue中，vue对象就是viewmodel:

其绑定模型就是:

采用mvvm模型，很好的分离了视图和数据，使得数据的处理与视图的展示完全不搭嘎，前端程序员可以只关注视图的处理，而不用关心model的任何逻辑。