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

[Lee Chen]

阅读更多系列文章请访问我的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. 用户体验好，可以不用刷新页面
一般需要安全性高的页面，比如注册、登录，会使用服务端渲染	安全性要求不高的页面，如商品页等，会使用客户端渲染