felix-cao / Blog

A little progress a day makes you a big success!
31 stars 4 forks source link

MVVM 理解 #102

Open felix-cao opened 5 years ago

felix-cao commented 5 years ago

MVVM 由 Model、View、ViewModel 三部分构成,Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表UI 组件,它负责将数据模型转化成UI 展现出来,ViewModel 是一个同步View 和 Model的对象。

在软件开发里 数据存储在数据库里面,通过查询语句查询出来就是数据,查询出来的数据有时候涉及到隐私等原因不能直接显示到界面给用户看,需要成数据对象模型 M, 这个数据对象模型就是 Model;

这些数据需要呈现在一个界面上,专业一点的叫法交图形用户界面(Graphical User Interface),简称GUI,这个界面就是 V;

有了 M 与 V,用户的界面是变化多端,还需要处理用户交互,数据不能直接展示在 V 上,V 上产生的数据,也不能直接当数据提交在数据库;

所以出现了中间这一层C,中间这一层叫C也好,VM也罢,看怎么好理解与传播了。

这让我们的关注点从如何操作DOM变成了如何更新JavaScript对象的状态,而操作JavaScript对象比DOM简单多了!

这就是MVVM的设计思想:关注Model的变化,让MVVM框架去自动更新DOM的状态,从而把开发者从操作DOM的繁琐步骤中解脱出来