前端开发中业务模型和视图模型具体分别指什么？

Question

在徐飞的这篇文章中，第五节：“为什么MVVM是一种很好的选择”中，有提到业务模型和视图模型，他们具体指什么？

Answer 1

【业务模型】和【领域模型】较为相似，可以指用于表达业务内容的数据。例如淘宝的业务模型是【商品】，博客的业务模型是【博文】，推特的业务模型是【推文】。可以理解为经典 MVC 中的 Model，包含了名称、描述、时间、作者、价格等【真正意义上的】数据字段内容。

而【视图模型】则是 MVVM 兴盛后的新概念。要实现一个完整的 Web App，除了数据外，还有 UI 交互中非常多的【状态】。例如：弹框是否打开、用户是否正在输入、请求 Loading 状态是否需要显示、图表数据分类是否需要显示追加字段、和用户输入时文本的大小和样式的动态改变……这些和具体数据字段无关，但对前端实际业务场景非常重要的视图状态，可以认为是一种【视图模型】。在 Vue 一类的 MVVM 库中，上述例子中的状态都能够用 JS 变量来表示和控制，这同样可以认为是一种数据模型。

因此，业务模型和视图模型在前端都是十分重要的概念。在 MVVM 解决了业务模型数据到页面之间的绑定关系后，Redux 等状态管理库想要解决的则是富交互页面中，视图模型状态极度膨胀所带来的一系列问题了。对这些模型有更深的理解，实际上也有助于理解前端目前的发展方向。