通過框架設計理解React、Angular、Vue區別
一、職責範圍
職責範圍就是框架設計之初要考慮的範圍，是一手全包還是隻封裝底層核心程式碼？簡單說就是這個框架可以為你做多少事情
1.small scope（小職責範圍）
代表：react
（1）設計理念：
自底向上，只建立核心模型，然後圍繞核心模型建立生態系統
（2）優點：
初始時需要理解的概念很少，初始只用掌握核心程式碼
靈活:因為框架/庫只提供了部分底層的原生實現，使用者可以在框架基礎上構建任意複雜的系統
生態好:擁有強大的生態系統
維護成本小
（3）缺點：
學習成本大
1.同樣也是因為框架只提供了部分底層的原生實現，所以當我們需要構建比較複雜的系統時，就需要用非常有限的、非常原始的一些東西，去構建一些複雜的想法。（如學習了React，還需鑽研Redux、HOC 高階元件、render、props、Hooks以及在js中使用css的各種方式等等）
2.官方只提供基礎的文件，其餘需要自己去鑽研，需要自主學習能力
2.large scope（大職責範圍）
代表：Angular
（1）設計理念
自上而下,儘可能考慮使用者可能會遇到的問題；當你嘗試解決一個問題時，你在框架內就能找到解決方案。
（2）優點
框架與生態一致性：集中式的設計確保了它本身與其生態系統的。當你遇到一個具體問題的時候，你不必去找一些不同的解決方案，你只需要看看框架它讓你做什麼，最大的可能就是它（框架）對此已經有解決方案。
少量程式碼解決最常見的問題：可以通過構建抽象概念來解決最常見的問題，如只需要建一個路由、一個http請求資料就能實現基本功能。
（3）缺點
更高的學習門檻：對於初學者來說，如果沒有類似使用 Java 或者 C# 等語言經驗的話，而是僅僅只學過html/css以及JavaScript的話，當你看到 Angular 文件的時候，你可能會很難吃透。
不靈活：如果框架內建的解決方案不滿足當前需求，但卻沒有方法替換。當你想嘗試更改底層想法時，它會影響到你專案中的每個元件（牽一髮而動全身）。
3.progressive scope（漸進式框架）
代表：Vue
（1）設計理念
框架分層，允許以漸進的方式選擇特性。如需要路由、需要狀態管理就引入，不需要也不影響，按需取捨，既能開發全新應用，也能融合之前已開發應用
（2）優點
降低了學習門檻
（3）缺點
作為small scope 和 large scope的中間者，需要去權衡利弊
生態系統可能不會像小職責範圍那樣多樣化
維護負擔幾乎與大職責範圍相同
二、渲染機制
如何表達你的檢視層，框架如何處理程式碼？如何將實際渲染東西展示到頁面上的？這就要考慮我們的渲染機制。
1.原生DOM
原生DOM大家都熟悉，在這裡我就不過多說明了。
<div>
<p class="framework-design">框架設計</p>
</div>（1）優點
- 易用性強
（2）缺點
在我們對原生DOM進行操作時，會發現很多缺點
- 效率低
- 解析速度慢
- 記憶體佔用量高
2.JSX / VDOM（虛擬DOM）
通過框架來表現自己的UI結構
render() {
return h(
'div',
null,
h(
'p',
{ 'class': 'framework-design' },
'框架設計'
)
);
}（1）優點
- 通過JS實現UI層，具有 JavaScript 的完整表現力
- 將檢視層視為資料，可以對資料做任何操作
- 可以渲染到任何目標，終端、PDF、Canvas、WebGL
（2）缺點
- VDOM 本身成本很高
即使你只有一個節點，也可能會觸發 這個VDOM 的 Diff 演算法
3.templates（模板編譯）
通過模板來表現自己的UI結構
<template>
<div>
<p>{{ data.title }}</p>
<p>{{ data.content }}</p>
</div>
</template>（1）優點
- 更加直接的渲染指令，具有更好的原生效能
通過模板編譯符準確知道可變的dom節點
<div>
<p>框架設計</p>
<p>{{ message }}</p>
</div>（2）缺點
- 受限於嚴格的模板語法，從而失去 JavaScript 的表達能力
三、狀態機制
1.髒檢查
髒資料：產生了變化的資料
髒檢查：找出髒資料，重新渲染檢視
那麼在什麼時候進行髒檢查呢？檢查哪些元素呢？
下面以Angular為例
何時進行
Angular 會在可能觸發 UI 變更的時候進行髒檢查。例如常用的 ng-click。
檢查哪些元素
Angular 會對所有繫結到 UI 上的表示式做髒檢查。在Angular程式初始化時，會將繫結的物件的屬性新增為監聽物件（watcher），也就是說一個物件綁定了N個屬性，就會新增N個watcher。
如何操作
當髒檢查觸發，則會迴圈遍歷所有watch，最後更新DOM
通俗點講
我們回憶一下我們的學生時代，住校生都住在寢室裡面，每棟宿舍樓都有專門的宿管阿姨。每天晚上快熄燈的時候（觸發髒檢查了），宿管阿姨開始巡邏了，她要看哪些學生還沒回寢室呢，寢室有哪些違規現象呢。阿姨會從1樓開始一直巡邏檢視到頂樓，每間宿舍都要檢視（迴圈遍歷watcher）。但是呢，因為目前頂樓還沒住人，所以阿姨巡邏時會跳過（只檢查繫結到UI上的表示式）。最後啊，沒回寢的學生都被阿姨拿上小本本記下來了（查出了髒資料）。
2.依賴追蹤
當某一個數據（依賴資料）發生變化的時候，所有依賴這個資料的“相關”資料“自動”發生變化，也就是自動呼叫相關的函式去實現資料的變動，也就是資料驅動。
下面以Vue為例
何時進行
依賴資料發生變化
如何操作
為資料定義 getter & setter
當在data裡面定義了資料時，系統會為這些資料新增getter和setter
獲取資料時觸發getter，為資料賦值時觸發setter
當觸發了setter時，model發生變化，系統會通知所有的viewModel更新檢視
通俗點講
在我們大學時期，上課還是相對而言較嚴格的，為了應對各項嚴格的規章制度，417寢室的室友們商量拉了一個微信群（依賴資料：微信群），當有重大事情時在群裡面進行通知（每個人都可以接收訊息、傳送訊息 getter & setter）。
某天政治課，大家偷懶賴床不去上課，只有小李一人去了教室，不一會兒，小李就在微信群裡面發了一句話“老師在點名！速來！”（set，更改了model，通知了所有的viewModel）。接收到訊息的所有室友迅速起床飛奔去教室（監聽到依賴資料發生變化，自動更新檢視）。
3.VDOM diff
儲存上次的VDOM，對比這次的VDOM，發現差異，更改檢視
下面以React為例
何時進行
state 發生改變
如何操作
比較兩次的VDOM，層層遍歷，找出不同的資料，更新整個DOM
通俗點講
大學每年最痛苦的就是期末了，期末時各個同學打起十二分的精神，搶佔各個樓道口，通宵達旦的背書看題。這個時候少不了老師劃的重點，政治課老師劃完重點後，小熊還不放心，去找上一屆的學長討來了學長那一屆的重點，回到寢室就開始一章一章地對比，從書的第一頁翻到了最後一頁（比較兩次VDOM），把不同的地方都標記出來（找出不同的資料），最後把比較過後的整本書都背了下來（更新整個DOM）。
PPT模板下載大全https://www.wode007.com
總結
通過以上我們可以看出
1.React
是自底向上的框架。
它只提供部分底層的原生實現，擁有強大的生態環境。
使用JSX / VDOM 來渲染檢視層。
使用VDOM diff更新檢視，通常整個DOM都要重新渲染過。
學習成本很高，雖然初始上手很快，但如果想要實現更為複雜的系統，需要鑽研Redux、HOC 高階元件、render、props、Hooks等知識。
2.Angular
是自上而下的框架。
使用templates和JSX / VDOM實現檢視層。
採用髒檢查更新檢視，設定多個watcher，當watcher越多時會耗費效能。
學習門檻高，不利於初學者。
元件豐富，一般常見的功能都在框架裡能找到解決方案。
二次開發成本高，當想實現底層想法時，會影響很多元件。
3.Vue
漸進式框架。
使用templates和JSX / VDOM實現檢視層。
採用資料驅動更新檢視，有變化才更新，提升效率。
易上手，靈活性強，既能開發全新應用，又能融合進已有應用中。
效能高，超快虛擬DOM