在业务中一般 MVVM 框架一般都会配合上数据状态库(redux, mobx 等)一起使用，本文会通过一个小 demo 来讲述为什么会引人数据状态库。
从 MVC 到 MVVM 模式说起传统 MVC 架构(如 JSP)在当今移动端流量寸土寸金的年代一个比较头疼的问题就是会进行大量的全局重复渲染。但是 MVC 架构是好东西，其对数据、视图、逻辑有了清晰的分工，于是前端 MVC 框架(比如 backbone.js) 出来了，对于很多业务规模不大的场景，前端 MVC 框架已经够用了，它也能做到前后端分离开发单页面应用，那么它的缺陷在哪呢？
拿 backbone.js 说，它的 Model 对外暴露了 set 方法，也就是说可以在不止一个 View 里修改同个 Model 的数据，然后一个 Model 的数据同时对应多个 View 的呈现，如下图所示。当业务逻辑过多时，多个 Model 和多个 View 就会耦合到一块，可以想到排查 bug 的时候会比较痛苦。
针对传统 MVC 架构性能低(多次全局渲染)以及前端 MVC 框架耦合度高(Model 和 View) 的痛处，MVVM 框架完美地解决了以上两点。可以参阅之前写的 MVVM 框架解析之双向绑定
only MVVM假设有这么一个场景，在输入框中查询条件，点击查询，然后在列表中返回相应内容。如下图所示：
假设用 react 实现，思路大体是先调用查询接口，调用成功后将获取到的数据通过 setState 存进 list 中，列表显示部分代码如下：
const Decorate = (ListComponent) => class extends Component { constructor() { super() this.state = { list: [] } } componentDidMount() { fetch('./list.json') .then((res) => res.json()) .then(result => this.setState({ list: result.data })) } render() { return ( <ListComponent data={this.state.list} /> ) } }