MVC

M:Model? ? 數據模型

V:View? ? 界面視圖

C:controller? ? 邏輯

通訊的方向，都是單向的

互動的模式

一般分為兩種，1.通過view接受指令，傳遞給controller。然后controller控制model影響view。

第一種

第二種，controller接受指令后，控制model并修改view

第二種

具體可查看阮老師的博客?MVC，MVP 和 MVVM 的圖示 - 阮一峰的網絡日志

MVVM

V：view? ? 界面

M：model? ? 數據模型，和我們的業務需求或業務實體是一 一映射關系。

VM：viewmodel? ? 溝通 view 和model。

View 和 ViewModel雙向綁定

單向綁定/雙向綁定

單向綁定：指的是ViewModel改變會影響到View的改變，例如 ViewModel中操作的數據由true變為false。那么View中綁定這個數據的元素就會執行相應的操作。

雙向綁定：單向綁定基礎上增加了View影響到ViewModel的改變。例如View中一個input輸入框，輸入內容后，ViewModel中就會改變相應的數據。最簡單的例子就是vue中 v-model 語法。

這里講的挺詳細的，請移步??什么是 MVVM 模式？ - 簡書

MVVM框架中，就核心的就是數據的雙向綁定，其中有angluar的臟數據檢測和vue中的數據劫持。

臟數據檢測

當指定事件觸發后進入臟數據檢測，會調用 $digest 循環遍歷所有數據，判斷當前值和先前值是否相同，如果不一致，就會調用 $watch 函數，然后再調用 $digest 循環直到發現沒有變化。循環至少為2次，至多為十次。

優點:1.檢查所有數據，直到沒有更新，再去統一UI，減少操作dom次數。

缺點:1.需要檢查所有數據，進行對比，會比較消耗性能。

數據劫持

Vue 只要利用了 Object.defineProperty()實現雙向綁定，通過這個函數監聽 Object的set和get事件，然后通過觀察者，發布訂閱模式修改。

兩者的對比

來自 vue官方，說的比較客觀，主要看雙向綁定那里。對比其他框架 — Vue.js

路由原理

前端路由的前生今世及實現原理 - FE-雜貨鋪 - SegmentFault 思否????????這里有個詳細的

前端路由實現起來其實很簡單，本質就是監聽 URL 的變化，然后匹配路由規則，顯示相應的頁面，并且無須刷新。目前單頁面使用的路由就只有兩種實現方式

1.hash 模式

2.history 模式

www.test.com/#/?就是 Hash URL，當 #?后面的哈希值發生變化時，不會向服務器請求數據，可以通過?hashchange?事件來監聽到 URL 的變化，從而進行跳轉頁面。

如圖

Virtual Dom? ? 虛擬DOM

操作DOM是一件非常耗費性能的事情，但是操作一個JS對象性能就會好的多。可以通過操作js對象，把與數據給整理出來，然后再用這個數據去渲染界面，這樣性能就好的多。

Virtual Dom 算法描述

可以通過js來模擬實現dom，剩下的問題，就是這么判斷新數據和舊數據的差異。請移步?框架通識 | InterviewMap

Virtual Dom算法的實現，就是三步
1.通過js來模擬創建DOM對象。

2.判斷兩個對象的差異。

3.渲染差異。