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