React 與 Vue 框架的設計思路大 PK

大家好，我是若川。今天分享一篇框架設計思路的好文。

關于我

大家好我是花果山的大圣，今天很榮幸，有機會跟大家分享一下很多年輕人感興趣的話題《 Vue 和 React 設計思想 PK》,個人水平有限，如果有理解不到位的請傾盆，大家看完后并且再去 Vue 和 React 源碼里探索一番，一定會有所收獲，如果沒時間的話，還可以跟我一起早起學習

Github
B站
掘金

框架總覽

前端框架繁多，在學習的時候也會陷入困惑，我們應該抓住最主流的內容 Vue/React，深入底層，嘗試揣摩框架作者的設計思路，開闊自己的視野，大家也不要把自己限制在框架之中，認為工作中用到 Vue，就覺得 React 學起來沒用，有些時候我們學習競品的框架，是為了更好的認識自己在用的框架，廢話不多說，由于 Vue 本身是個中庸的框架，再揪出設計思路理念比較極致的 Angular 和 Svelte，我們先從視圖層最火的四大框架看一下

下載量

對比維度

我們從多個維度去對比前端的框架，就能看清楚現在各個框架的現狀，我們學習每個框架的設計范式，并且嘗試打破局限，就像豬八戒一樣，出了高老莊，一路好風光

框架發展

字符串模板

想看清現在視圖層的現狀，要簡單的看下之前框架的發展路線，JQuery 時代的渲染層，大部分都是基于字符串的模板，典型的框架就是 Underscore，baiduTemplate。大致的原理就是把 template 解析成一個函數，缺點也很明顯，就是每次數據變化，模板內部要全部重新渲染

然后剛才我說的四個框架占領了現在的 Web 領域，核心的目標都是一樣的，為了做出性能更好的 Web 應用，為此各路大神八仙過海，各顯神通有這么幾個宏觀的維度

原生 VS 抽象

原生的就是 JavaScript 本身，比如 JQuery 基本沒有太多的抽象，一個 $ 打天下，React 抽象程度稍微復雜一些，需要理解 Component， State， Hooks， JSX 等概念就可以上手了，抽象比較多的就是 Angular，上手就需要了解十幾個概念，學習曲線很陡峭， Vue 就處在 React 和 Angular 中間，了解完 data，methods，單文件組建后就可以上手了

運行時 VS 預編譯

另外一個維度就是運行時和預編譯這個維度，所謂運行時，在瀏覽器內存里進行的任務，React 的 Runtime 比較重一些，數據發生變化后，并沒有直接去操作 dom，而是生成一個新的虛擬 dom，并且通過 diff 算法得出最小的操作行為，全部都是在運行時來做的

這個維度的另外一個極端，也就是重編譯的框架，在上線之前經過通過工程化的方式做了預處理，典型代表就是Svelte，基本上是一個 Compiler Framework，寫的是模板和數據，經過處理后，基本解析成了原生的 dom 操作，Svelte 的性能也是最接近原生 js 的

Vue 依然處于比較中庸的地位，在運行時和預編譯取了一個很好地權衡，保留了虛擬 dom，通過響應式控制虛擬 dom 的顆粒度，在預編譯里又做了足夠多的性能優化，做到了按需更新，這個一會再細聊

框架設計的維度

Vue 和 React

然后我們揪出來 Vue 和 React，有一些更細化維度

可變數據 VS 不可變數據

Vue1 就是把響應式數據玩出了花，通過攔截操作，修改一個數據的同時收集依賴，然后數據修改的時候去通知更新 dom，體驗很是舒爽，我們修改了一個 JavaScript 的對象，視圖層就修改好了，這是 Vue 的黑魔法，React 的虛擬 Dom 創建之日期，就是通過計算新老數據的 diff，去決定操作那些 dom，所以每次修改數據，需要生成一份新的數據，說不上優劣之分，只不過路線不同

這大概就是 Vue 和 React 修改數據的代碼對比

權衡

隨著應用越來越復雜，React15 架構中，dom diff 的時間超過 16.6ms，就可能會讓頁面卡頓，Vue1 中的監聽器過多，也會讓性能雪崩，為了解決這個問題，Vue 選擇了權衡，以組件作為顆粒度，組件層面用響應式通知，組件內部通過 dom diff 計算，既控制了應用內部 Watcher 的數量，也控制了 dom diff 的量級。看到這段實現的時候，不僅高呼，真是妙啊

??registerComponentHook(componentId,?'lifecycle',?'attach',?()?=>?{callHook(vm,?'beforeMount')const?updateComponent?=?()?=>?{vm._update(vm._vnode,?false)}new?Watcher(vm,?updateComponent,?noop,?null,?true)vm._isMounted?=?truecallHook(vm,?'mounted')})

預編譯和運行時

相關概念剛才已經科普了，在 Vue 和 React 中的體現，主要體現在 JSX 和 template 的區別上，React 是完全的 JSX，可以 JSX 在里面寫 JavaScipt，所以特點就是足夠的動態，與之對應的就是 Vue 的 template，template 的特點是語法受限，可以執行的語法技術 v-if v-for 等指定的語法，雖然不夠動態，但是由于語法是可便利的，所以可以再預編譯層面做更多的預判，讓 Vue 在運行時有更好的性能

順便放兩張尤大的 ppt 的圖，Vue3 通過在預編譯階階段做靜態標記的優化，做到了按需更新