学习一种新的框架，在我看来，先掌握他的发展会更好的上手一些。
前端开发，目前比较流行的开发模式就是MVVM结构了，如果使用过vue或者angular就能感受到其双向绑定的便利。react也可属于MVVM结构，但是与传统的MVVM框架不同的是，react默认数据绑定方式是单向绑定，而vue及angular都是双向绑定；react使用虚拟DOM配合JSX，而vue及angular直接将数据通过属性绑定在真实DOM上的。
首先我们来说说，MVVM框架的发展史。
在最早期，HTML页面是预先编写好的存放在Web服务器上的html文件，浏览器请求某个URL时，通过后台返回HTML文件，在浏览器中展示HTML的内容。这里暴露出一个问题就是，如果每个用户所访问的网页是不一样的，那么针对不同的用户就需要很多后台返回很多的HTML文件。所以，一个最直接的想法就是利用C、C++这些编程语言，直接向浏览器输出拼接后的字符串。这种技术被称为CGI：Common Gateway Interface。
很显然，像新浪首页这样的复杂的HTML是不可能通过拼字符串得到的。于是，人们又发现，其实拼字符串的时候，大多数字符串都是HTML片段，是不变的，变化的只有少数和用户相关的数据，所以，又出现了新的创建动态HTML的方式：ASP、JSP和PHP等——分别由微软、SUN和开源社区开发。
以上页面发展历史，摘自廖雪峰官网的总结
在ASP中，一个asp文件就是一个HTML，但是，需要替换的变量用特殊的<%=var%>标记出来了，再配合循环、条件判断，创建动态HTML就比CGI要容易得多。
但是，一旦浏览器显示了一个HTML页面，要更新页面内容，唯一的方法就是重新向服务器获取一份新的HTML内容。如果浏览器想要自己修改HTML页面的内容，怎么办？那就需要等到1995年年底，JavaScript被引入到浏览器。
有了JavaScript后，浏览器就可以运行JavaScript，然后，对页面进行一些修改。JavaScript还可以通过修改HTML的DOM结构和CSS来实现一些动画效果，而这些功能没法通过服务器完成，必须在浏览器实现
以上，摘自廖雪峰官网的总结。
那么，MVVM的发展史是什么样的呢？
在早期没有JS时，所有的处理都是放在服务器上的，用户提交一个表单给后台，后台也许会花30秒判断，再返回一个字段不能为空的提示，这样就大大降低了使用体验。所以这时JS这一脚本语言就出现了。
第一个阶段：
JS通过浏览器解析机制，原理是使用浏览器提供的原生API 结合JS语法，可以直接操作DOM。
比如说：
HTML中写到：
<div id="name" style="color:#ffffff">hello world</div>
JS操作DOM:
var dom1 = document.getElementById('name');
dom1.innerHTML = '你好';
dom1.style.color = '#000000'; // css样式也可以操作
那么，前端的HTML将变成：
<div id="name" style="color:#000000">你好</div>
如果要改变很多的话，语句太过繁琐。
第二个阶段：
JQuery的时代。原生的JS还是比较难懂的，而且写法比较复杂，代码量相对来说比较大，还需要考虑不同浏览器之间的兼容。JQuery上手快，且代码比较简洁。
比如说：
HTML中写到：
<div id="name" style="color:#ffffff">hello world</div>
JQuery操作DOM：
$('#name').text('你好').css('color', '#000000')
那么前端的HTML将变成：
<div id="name" style="color:#000000">你好</div>
第三个阶段：
MVC的开发模式。做过后台的同学应该能够更加深刻的体会到，浏览器每一次请求都需要后台进行配合。前后端不分离。MVC模式即model（模型，数据库层），view（用户界面层），controller(业务逻辑层)。所有的数据的流向是单向的。各层之间的逻辑如下图:
那么用户登录其过程如下：
用户输入用户信息 -> 点击登录按钮 -> 浏览器接收数据(controller)做数量处理 -> 存入数据库 -> 页面渲染 -> 取数据库数据 -> 页面重新渲染
这个模式最大的不足就是，动一处而动全身。数据、显示不分离。如果业务逻辑要变，很简单的需求，你用jsp或者php 拼接出来的ajax数据页面，比如某个字段不需要了，把性别字段区分开，男的单独显示，女的单独显示，以前数据在一个表，而这时那么，后端先要sql查询把男、女数据分开，然后渲染字符串时候把 年龄 这个字段去除，然后把男女分开成2个table，然后再推送给前端接收。前端需重新渲染。这样加重了前端后台的工作。
第四个阶段
MVVM框架模式，最早由微软提出来，它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。也就是我们常说的，前后分离，真正在这里得以实现。
它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然,model数据的变动，也自动展示给页面显示。把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。
model通常是指JS的对象，viewModel可以看做一个model与controller之间的观察这。由于数据驱动模式的精髓在于【数据】和【视图】分离，所以我们首先并不关心DOM结构，而是关心数据的展现。
最简单的数据存储方式是什么呢？当然不是mysql，数据库而是使用JavaScript对象。
MVVM与MVC最大的区别就是：它实现了View和Model的自动同步，也就是当Model的属性改变时，我们不用再自己手动操作Dom元素，来改变View的显示，而是改变属性后该属性对应View层显示会自动改变。
拿Vue来做一个简单的例子
当reverseMessage()这个方法中，viewModel观察到了message的改变，于是将更新后的model自动更新数据到dom，在view层展示，而不用我们不停的去请求controller中的东西，手动去刷新页面。
<div>
<p>{{message}}</p>
</div>
<script>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>