SPA和MPA的区别，MVC和MVVM的区别以及聚焦于View-Model的Vue框架

SPA和MPA的区别

• SPA Single Page Application单页面应用
• MPA Mutiple Page Application 多页面应用

不同方面	SPA	MPA
历史	现代	典型
耦合性	前后端松耦合	紧耦合，前后端代码通常放在同个页面
速度	速度很快，当数据改变时只在一个页面改变部分组件	每次数据变化都需要重新请求和刷新页面
开发	前后端松耦合，可分开同时开发	前后端紧耦合，需要先开发后端代码
安全	依赖JS，JS不需编译，这样就易受攻击，安全性差	较为安全，MPA可都为静态内容
SEO	较差	较好

SEO Search Engineen Optimization 搜索引擎优化，搜索引起主要靠爬取来对网页进行索引，静态内容的网页更好爬取，也因此能获得更好的排名

MVC和MVVM的区别

MVC Model View Controller 将程序分成三个逻辑组件（Model、View、Constroller）的一个架构（Architecture）
MVVM Model View View-Mode 方便图形用户界面（Graphical User Interface）开发分离的一个架构

关键区别

• MVC架构历史悠久，而MVVC框架相对来说是一个新的东西
• MVC框架的程序入口点是Controller，而MVVM的程序入口点是View，这是因为MVC是由控制器来掌控整个程序的，而MVVM是事件驱动（event-drived）
• MVC中，Controller和View是一对多的关系，在MVVM中，View和View-Model是一对多的关系
• MVC的Model组件可以独立于用户来测试，MVVC方便单元测试
• MVC可以用于Web开发，而MVVM主要用于桌面应用的图形化界面（因其数据绑定能力）

个人总结：MVC框架方便后端程序开发，它在逻辑上去区分表现层、业务层和持久层，MVVM方便图形化界面的开发，像桌面应用，他最大的特点就是由用户通过图形化界面来触发事件的、因此需要对数据进行实时监测检测并能动态修改的View-Model。

MVC架构：

MVVC架构：

聚焦于View-Model的Vue框架

Vue框架不完全遵照MVVM模型，它将DOM作为View，而且主要聚焦于MVVM的View-Mode层，Model简单用一个Plain JavaScript Object来放置数据，Vue起到一个监听View数据改变并进行数据双向绑定、动态修改的作用。

• 每一个Vue实例都和一个对应的Dom元素关联
• Vue.js通过将数据对象中的属性转换为ES5的getter/setters来实现透明的交互。不需要作脏数据校验，也不需要去显示地通知Vue去更新View。当数据改变，View在下一帧也会被更新。

参考
[0]. Single Page Application (SPA) vs Multi Page Application (MPA) – Two Development Approaches
[1]. MVC vs MVVM: Key Differences with Examples
[2]. Getting Started