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. 用戶體驗好，能夠不用刷新頁面
通常須要安全性高的頁面，好比註冊、登陸，會使用服務端渲染	安全性要求不高的頁面，如商品頁等，會使用客戶端渲染