近年来前端一个明显的开发趋势就是架构从传统的 MVC 模式向 MVVM 模式迁移。在传统的 MVC 下，当前前端和后端发生数据交互后会刷新整个页面，从而导致比较差的用户体验。因此我们通过 Ajax 的方式和网关 REST API 作通讯，异步的刷新页面的某个区块，来优化和提升体验。
MVVM 框架基本概念在 MVVM 框架中，View(视图) 和 Modal(数据) 是不可以直接通讯的，在它们之间存在着 ViewModal 这个中间介充当着观察者的角色。当用户操作 View(视图)，ViewModal 感知到变化，然后通知 Modal 发生相应改变；反之当 Modal(数据) 发生改变，ViewModal 也能感知到变化，使 View 作出相应更新。这个一来一回的过程就是我们所熟知的双向绑定。
MVVM 框架的应用场景MVVM 框架的好处显而易见：当前端对数据进行操作的时候，可以通过 Ajax 请求对数据持久化，只需改变 dom 里需要改变的那部分数据内容，而不必刷新整个页面。特别是在移动端，刷新页面的代价太昂贵。虽然有些资源会被缓存，但是页面的 dom、css、js 都会被浏览器重新解析一遍，因此移动端页面通常会被做成 SPA 单页应用。由此在这基础上诞生了很多 MVVM 框架，比如 React.js、Vue.js、Angular.js 等等。
MVVM 框架的简单实现模拟 Vue 的双向绑定流，实现了一个简单的 MVVM 框架，从上图中可以看出虚线方形中就是之前提到的 ViewModal 中间介层，它充当着观察者的角色。另外可以发现双向绑定流中的 View 到 Modal 其实是通过 input 的事件监听函数实现的，如果换成 React(单向绑定流) 的话，它在这一步交给状态管理工具(比如 Redux)来实现。另外双向绑定流中的 Modal 到 View 其实各个 MVVM 框架实现的都是大同小异的，都用到的核心方法是 Object.defineProperty()，通过这个方法可以进行数据劫持，当数据发生变化时可以捕捉到相应变化，从而进行后续的处理。
Mvvm(入口文件) 的实现一般会这样调用 Mvvm 框架
const vm = new Mvvm({ el: '#app', data: { title: 'mvvm title', name: 'mvvm name' }, })