Vue教程00：MVC、MVP、MVVM模式的区别，服务端渲染与客户端渲染的区别 #1
Description
阅读更多系列文章请访问我的GitHub博客，示例代码请访问这里。
现代与传统开发模式的区别
| 现代开发模式 | 传统开发模式 |
|---|---|
| Vue、React、Angular | jQuery |
| 只需花费20%时间在视图层 | 需花费80%时间在视图层 |
| 数据层与视图层自动绑定 | 数据与视图不分离 |
MVC模式介绍
MVC为Model（模型，同时也是数据）、View（视图）、Controller（控制）的缩写，它代表程序分为三层：
- 最上层是View（视图层），即提供给用户的操作界面。
- 中间层是Controller（控制层），它会根据用户从View（视图层）输入的指令，对Model（数据层）中相关的数据进行操作，产生最终结果。
- 最底层是Model（数据层），它存储了程序运行所需的数据或信息。
MVC三层相互独立，每一层内部的工作并不影响其它层，各自提供对外接口，供上层调用。这样程序就实现模块化，各层进行修改都不会影响其它层的功能。
MVC、MVP、MVVM模式的区别
| MVC | MVP | MVVM |
|---|---|---|
| 分为3个部分：视图（View）用户界面、控制器（Controller）业务逻辑、模型（Model）数据保存。 | MVP将Controller改名为Presenter，同时改变了通信方向。 | MVVM模式将Presenter改名为ViewModel，基本上与MVP模式完全一致。 |
| 通信方式 |
MVVM模式通信方向 | |
| MVC模式的通信是单向的： 1. View传送只领到Controller。 2. Controller完成业务逻辑后，要求Model改变状态。 3. Model将新的数据发送到View，用户得到反馈。 |
MVP模式的通信方式： 1. 各部分之间的通信是双向的。 2. View与Model不发生联系，都通过Presenter传递。 3. View非常薄，不部署任何业务逻辑，称为“被动式图”（Passive View），即没有任何主动性，而Presenter非常厚，所有逻辑都部署在这里。 |
MVVM模式与MVP模式的区别是，它采用双向绑定（data-binding）：View的变动，自动反应在ViewModel，反之亦然。View、Angular和Ember都采用这种模式。 |
服务端渲染与客户端渲染的区别
| 服务端渲染 | 客户端渲染 |
|---|---|
| 由服务端将数据组合成html标签后，由前端展示，如普通HTML页面 | 服务端向前端传输数据，如JSON，由前端组装成html页面展示 |
| 如Pug、EJS等模板引擎 | 如Vue、React等框架 |
| 优点：1. 安全，因为服务端的内容对前端都不可见 2. 对SEO有利，由于搜索引擎只会读取html，不会执行JavaScript，因此客户端渲染的页面在搜索引擎看来只是个空白页面。 | 优点：1. 节省流量，数据量少 2. 用户体验好，可以不用刷新页面 |
| 一般需要安全性高的页面，比如注册、登录，会使用服务端渲染 | 安全性要求不高的页面，如商品页等，会使用客户端渲染 |