MVC 与 MVVM

MVC是Model，Control，View。
核心：单向数据改变
用户操作–》View接收用户的输入–》交给Control业务逻辑层去处理—》处理完交给Model进行数据持久化–》最后将数据发给View
还有一种是Control去接收用户操作指令–》Model–》View

MVC中更新UI是先取DOM，再进行更新，更新的时候数据和业务逻辑与页面之间存在强耦合

MVVM由以下三个内容组成
核心：数据双向绑定

View：界面
Model：数据模型
ViewModel：作为桥梁负责沟通View和Model

MVVM中，UI是通过数据驱动的，数据一旦改变就会相应的刷新对应的UI，UI如果改变，也会改变对应的数据。这种方式在业务处理中只关心数据的流转，而无需直接和页面打交道。
ViewModel只关心数据和业务的处理，不关心View如何进行处理，所以View和Model就都可以独立出来，任何一方改变也不一定需要改变另外一方。
并且可以将一些可复用的逻辑放在一个ViewModel中，让多个View复用这个ViewModel。

Virtual Dom

为什么用虚拟DOM，JS操作真实DOM的代价
用传统的开发模式，原生JS或jQuery操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍。在一次操作中，我需要更新10个DOM节点，浏览器收到第一个DOM请求后并不知道还有9次更新操作，因此会马上执行流程，最终执行10次。例如，第一次计算完，紧接着下一个DOM更新请求，这个节点的坐标值就变了，前一次计算为无用功。浪费性能，频繁操作可能会出现页面卡顿，影响用户体验。

虚拟DOM就是为了解决浏览器性能问题。若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性更新到DOM树上，再进行后续操作，避免大量无谓的计算量。所以，用JS对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。

通过JS对象来模拟DOM对象，操作JS对象比DOM省时(Because每次DOM的更改就变成了对JS对象属性的增删改查)

Finally:
Virtual Dom算法的实现就三步：通过JS来模拟创建DOM对象，判断两个对象的差异，渲染差异

框架变更历程史

😀

jQuery淘汰了原生JS

凭啥？
1.快速选取对象，方便操作DOM
2.链式操作
$("#Test").css('color','red').show(200).removeClass('style');
相对于原生JS，使用链式操作，所有操作代码共享一个jQuery对象，省去了每次操作都去逐步查询DOM的性能损耗。
3.Ajax
jQuery的Ajax比原生JS去操作Ajax更强大，因为提供了更多内容的封装，比如：$.ajax，$.post， $.get
原生JS去操作Ajax的时候，要从新建XMLHttpRequest对象开始，jQuery从$.ajax开始。哈哈哈哈哈哈哈哈哈哈😂。差距

Vue淘汰了jQuery

凭啥？
1.操作DOM？疯了？性能好的没事干了？
vue取代jQuery，最根本的原因就是数据的双向绑定，数据变了DOM跟着变。
完全秒杀
2.随着axios的出现，比通过jQuery写Ajax更有优势。
人家axios有拦截器，还可以取消请求，基于promise，自动转化为JSON格式。
jQuery返回的时候用的是回调函数(多个请求之间如果有先后关系，就会出现回调地狱)，通过success:function (){},error(){}
axios用的是promise的.then().catch()。