二、前后端分离的演变史
1.什么是MVVM
MVVM（Model-View-ViewModel）是一种软件架构设计模式，由微软WPF（用于替代WinForm，以前就是用这个技术开发桌面应用程序的）和Silverlight（类似于JavaApplet，简单点说就是在浏览器上运行的WPF）的架构师KenCooper和TedPeters开发，是一种简化用户界面的事件驱动编程方式。由JohnGossman（同样也是WPF和Silverlight的架构师）于年在他的博客上发表
MVVM源自于经典的MVC（Model-View-Controller）。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用，其作用如下：
该层向上与视图层进行双向绑定向下与Model层通过接口请求进行数据交互
MVVM已经相当成熟了，主要运用但不仅仅在网络应用程序开发中。当下流行的MVVM框架有Vue.js、AngularJS等
举例对比用传统的jQuery实现
HTMLinputid=apptype=text/input //这是一个输入框，输入内容 divid=content/div //这里的内容随输入框内容的变化而变化 $(#app).on(change,funcation{ $(#content).html(this.val()); })
用MVVM模式实现
VIEW层HTMLinputid=apptype=text/input //这是一个输入框，输入内容 divid=content/div //这里的内容随输入框内容的变化而变化 $(#app).on(change,funcation{ $(#content).html(this.val()); })ViewModel层观察者 //观察到输入框内容变化发送请求到Model层Model层数据层 //后端收到请求进行相应的处理返回给ViewModel层，然后ViewModel又会根据返回的数据修改View层
2.为什么要使用MVVM
MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大好处：
低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变可复用：你可以把一些视觉逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计可测试：界面素来是比较难于测试的，而现在测试可以针对ViewModel来写3.MVVM的组成部分
ViewView是视图层，也就是用户界面。前端主要由HTML和CSS来构建，为了更方便地展现ViewModel或者Model层的数据，已经产生了各种各样的前后端模板语言，比如FreeMarker、Thymeleaf等等，各大MVVM框架如Vue.js、AngularJS、EJS等也都有自己用来构建用户界面的内置模板语言
ModelModel是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则
ViewModelViewModel是由前端开发人员组织生成和维护的视图数据层。在这一层，前端开发者对从后端获取的Model数据进行转换处理，做二次封装，以生成符合View层使用预期的视图数据模型
需要注意的是ViewModel所封装出来的数据模型包括视图的状态和行为两部分，二Model层的数据模型是只包含状态的
比如页面的这一块展示什么，那一块站是什么，这些都属于视图状态（展示）页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么，这些都属于视图行为（交互）视图状态和行为都封装在了ViewModel里。这样的封装使得ViewModel可以完整地去描述View层。由于实现了双向绑定，ViewModel的内容会实时展现在View层，这是激动人心的，因为前端开发者再也不必低效又麻烦地通过操作DOM去更新视图
MVVM框架已经把最脏最累的一块做好了，我们开发者只需要处理和维护ViewModel，更新数据视图就会自动得到相应更新，真正实现事件驱动编程
View层展现的不是Model层的数据，而是ViewModel的数据，由ViewModel负责与Model层交互，这就完全解耦了View层和Model层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环