Vue教程00：MVC、MVP、MVVM模式的区别，服务端渲染与客户端渲染的区别

阅读更多系列文章请访问个人GitHub博客，示例代码请访问这里。

现代与传统开发模式的区别

现代开发模式	传统开发模式
Vue、React、Angular	jQuery
只需花费20%时间在视图层	需花费80%时间在视图层
数据层与视图层自动绑定	数据与视图不分离

MVC模式介绍

MVC为Model（模型，同时也是数据）、View（视图）、Controller（控制）的缩写，它表明程序分为三层：

• 最上层是View（视图层），即提供给用户的操做界面。
• 中间层是Controller（控制层），它会根据用户从View（视图层）输入的指令，对Model（数据层）中相关的数据进行操做，产生最终结果。
• 最底层是Model（数据层），它存储了程序运行所需的数据或信息。

MVC三层相互独立，每一层内部的工做并不影响其它层，各自提供对外接口，供上层调用。这样程序就实现模块化，各层进行修改都不会影响其它层的功能。

MVC、MVP、MVVM模式的区别

摘自阮一峰：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. 用户体验好，能够不用刷新页面
通常须要安全性高的页面，好比注册、登陆，会使用服务端渲染	安全性要求不高的页面，如商品页等，会使用客户端渲染