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

系列文章请访问我的GitHub博客，示例代码请访问这里。

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

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

MVC模式介绍

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

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

MVC、MVP、MVVM模式的区别

摘自阮一峰：MVC，MVP 和 MVVM 的图示

MVCMVPMVVM分为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. 用户体验好，可以不用刷新页面一般需要安全性高的页面，比如注册、登录，会使用服务端渲染安全性要求不高的页面，如商品页等，会使用客户端渲染