1. 首頁 > 生活百科 > >

京東云開發者｜關于“React 和 Vue 該用哪個”我真的栓Q

生活百科

一、前言：我全都要面對當今前端界兩座大山一樣的主流框架，React和Vue，相信很多小伙伴都或多或少都產生過這樣疑問，而這樣的問題也往往很讓人頭疼和猶豫不決：

  1. 業務場景中是不是團隊用什么我就用什么？
  2. 如果選擇了其中一個使用，那為什么不用另一個？
  3. 這兩個框架各有什么優點和無法解決的問題？
  4. 最新版本的Vue3已經出了一段時間了，我要不要做組內第一個吃螃蟹的勇士？
  5. 我該依據什么樣的因素決定使用哪個技術棧？
【京東云開發者｜關于“React 和 Vue 該用哪個”我真的栓Q】以上問題如果想不明白，很容易產生一個“算了不想了真麻煩 ， 還是隨大流好了，至少不會出錯”的答案，其實種種疑問都指向了一個終極問題，那就是關于技術棧的選型 。而技術棧選擇的合適與否 ， 往往對項目后續的開發有著極大的影響，甚至關系到業務落地的效率和效果 。僅僅掌握業務邏輯的開發 ， 已經完全不能滿足個人發展了，就好比一門武林絕學，招式用的再熟，也需要心法輔佐，所以也就引出了本文的主題：
  1. 旨在幫助那些對技術棧選擇困難癥的同學，并對React和Vue產生一定的認知
  2. 同時也適合那些只了解單一技術棧的小伙伴，可以拓展一下對不同框架的理解
二、正文：到底要啥本文不會從正面回答上面列出的問題，技術棧的選擇往往要依據現實情況從多方面考慮，所以我也將從以下幾個方面分別闡述觀點，各位讀者可以結合自身情況和以下觀點，決定React和Vue到底要用哪一個 。而其實關于技術選型，很容易代入自己的主觀意識，“好和壞”在同樣優秀的框架面前更像是一種自我感受，但筆者會盡量從客觀的角度去闡述，如果過程中觀點出現沖突或有誤，歡迎與我交流、指正 。
  • 選型對象說明
  • 團隊的適用性
  • 兼容性要求
  • 使用層面對比
  • 周邊配套
  • 跨端處理
  • 設計思路
  • 性能對比
  • 心智模型
  • 社區生態
  • 開源代碼許可協議
1. 選型對象說明對比對象：React（hooks 版本）、Vue2、Vue3
關于對比對象的選擇：
  • React有函數式組件的和類組件兩種寫法，鑒于 class 寫法較老，且這種寫法不利于構建工具的Tree-shaking ， 可能導致構建產物體積增加 ， 而函數式組件的hooks 寫法更符合未來的潮流，所以類組件在此也不做詳細的介紹，只選取函數式組件寫法的React作為對比對象 。
  • Vue2相較Vue3版本而言牢牢占據著大部分 Vue開發者的視野，但是因為Vue官方已經把Vue3作為默認的版本，所以在此同時把Vue2和Vue3作為對比對象 。
  • 對比的內容不會涉及到具體的某個API的實現 ， 也不會講解大篇幅干澀的源碼 ， 過于詳細的內容不是本文的重點，作為技術選型要從整體出發去考慮 。
2. 團隊的適用性在這方面，其實選哪個框架取決于團隊全體成員
  • 歷史原因：如果你是以開發者的身份剛入職到一個新的環境，并且接手的是一個成熟的項目 ， 處于正常迭代或者維護周期，那千萬不要想著顛覆團隊已有技術棧，技術棧切換就相當于重構 。而這種重構面臨的首要影響就是投入和產出不成正比，相信文章的讀者大多也都是撲在各個業務一線上，對業務方來說，采用什么樣的技術去實現他們并不關心 ， 并且切換技術棧帶來的風險、開發人力和測試回歸的成本都難以評估，除非帶來巨大價值，否則這也是與我們合作的上下游都難以接受的 。
  • 團隊習慣：如果你是項目負責人，在拋開對框架本身進行對比的同時，要考慮的是團隊成員對技術棧的熟悉程度，在大多數人都對某一項技術棧熟悉、而對另一項技術了解不深的情況下，那更為熟悉的技術棧帶來的人效和產出質量，顯然能幫助業務快速驗證和試錯 。
注意：不熟悉某項技術，絕不能成為不使用這項技術的托詞，從個人提升的角度考慮，學習新的技術?？梢詭椭覀償U充思路和視野，如果要做的新項目周期不緊張，也預留了充足的時間，那么新的技術顯然可以作為備選項之一 。
3. 兼容性要求
  • PC端：React和Vue均不支持IE8，對于個別瀏覽器兼容模式使用IE內核也可能是不支持的，具體要看使用的內核版本（IE瀏覽器簡直是前端界的噩夢），其他瀏覽器下可以放心大膽地使用了 。
  • H5端：React和Vue 2.x均能使用 。
注意：在移動端對于想要嘗鮮Vue 3.x版本的同學來說要關注一下，Vue 3.x依賴收集是使用Proxy這個 API，而Proxy在 IOS 端最低支持 IOS10 版本，并且由于這個API具備更底層的對象監聽能力，導致polyfill無法完全兼容，已實現的polyfill都是基于Object.defineProperty，并不能完整支持Proxy所有特性（比如數組長度的監測），所以如果業務環境對 IOS9 有兼容需求的情況下 ， 就不要嘗試了 。

推薦閱讀