Vue 和 React的比較
Vue 和 React比較
Vue
- 易用
已經會了 HTML、CSS、JavaScript？即刻閱讀指南開始構建應用！
- 靈活
不斷繁榮的生態系統，可以在一個庫和一套完整框架之間自如伸縮。
- 高效
20kB min+gzip 運行大小，超快虛擬 DOM ，最省心的優化
React
- 相比Vue,學習成本稍高 HTML、CSS、JavaScript,要熟悉JSX,和ES6
- 相比Vue 生態系統更加繁榮
- Learn Once, Write Anywhere。RN都能很好的跨平臺開發
站在技術細節 的角度看，它們確實不一樣，而且可以說幾乎沒有一樣地方。但是站在前端開發的角度看，它們是一樣的。
1. 聲明式 & 數據驅動渲染
本質上都是描述了『狀態』與『視圖』之間的映射關系。
用戶不直接操作DOM,兩中框架都是去DOM操作的。
2. 組件
- 展示型組件
展示型組件是最直接也是最常用的組件，就是用數據渲染視圖，“數據進，DOM出”。
- 接入型組件
接入型組件通常會跟接入數據的service層打交道。包含一些和服務器或數據源打交道的邏輯，然後接入型組件會將數據往下傳，傳給比較簡單的展示型組件
- 交互型組件
這一類組件會有比較復雜的交互邏輯，但是它是一個非常通用的邏輯，所以它強調復用。
- 功能型組件
它本身不渲染任何內容，它是一個邏輯型的組件。它通常作為一個擴展或一種抽象機制存在。
3. 路由
Vue-router，react-router
4. 狀態和數據流管理
Vuex ,redux
5. CLI工具
Vue-cli React
6. CSS 管理方案
Css,scss等
總結
設計理念不同導致提供的語法不同，但再怎麽不同，差異再怎麽大，它們要解決的問題是相同的。現在這些框架其實沒有什麽React能做到的事換成Vue就做不了。反而是React能做的事，使用Vue都能做。
為團隊選擇技術棧所考慮的因素與人不一樣。就目前來看，各大主流框架所提供的能力與社區的繁榮程度並沒有明顯的差距，所以框架是否靠譜等問題基本上不需要考慮，更多要考慮的因素反而是：
- 團隊大部分成員的口味更傾向於Vue
- 公司現有熟練vue的人員
- 如果團隊內部的目標使用一種技術棧並打磨出成熟的架構與工作流，提高工作效率的話，項目本身並不復雜，並且在沒有框架約束的情況下,更傾向Vue
相似之處
- 使用 Virtual DOM
- React 和 Vue 都是非常快的，所以速度並不是在它們之中做選擇的決定性因素。
- 提供了響應式 (Reactive) 和組件化 (Composable) 的視圖組件。
- 將註意力集中保持在核心庫，而將其他功能如路由和全局狀態管理交給相關的庫。
不同之處
## 1. 組件優化
- React 中的組件優化伴隨著相當的心智負擔。Vue 應用中，組件的依賴是在渲染過程中自動追蹤的，所以系統能精確知曉哪個組件確實需要被重渲染。你可以理解為每一個組件都已經自動獲得了 shouldComponentUpdate，並且沒有上述的子樹問題限制。
Vue 的這個特點使得開發者不再需要考慮此類優化，從而能夠更好地專註於應用本身。
## 2. HTML & CSS
在 React 中，一切都是 JavaScript。不僅僅是 HTML 可以用 JSX 來表達，現在的潮流也越來越多地將 CSS 也納入到 JavaScript 中來處理。這類方案有其優點，但也存在一些不是每個開發者都能接受的取舍。
Vue 的整體思想是擁抱經典的 Web 技術，並在其上進行擴展。對開發者更友好 。
### JSX vs Templates
在 React 中，所有的組件的渲染功能都依靠 JSX。JSX 是使用 XML 語法編寫 JavaScript 的一種語法糖。
使用 JSX 的渲染函數有下面這些優勢：
* 你可以使用完整的編程語言 JavaScript 功能來構建你的視圖頁面。比如你可以使用臨時變量、JS 自帶的流程控制、以及直接引用當前 JS 作用域中的值等等。
* 開發工具對 JSX 的支持相比於現有可用的其他 Vue 模板還是比較先進的 (比如，linting、類型檢查、編輯器的自動完成)。
事實上 Vue 也提供了渲染函數，甚至支持 JSX。然而，我們默認推薦的還是模板。任何合乎規範的 HTML 都是合法的 Vue 模板，這也帶來了一些特有的優勢：
* 對於很多習慣了 HTML 的開發者來說，模板比起 JSX 讀寫起來更自然。這裏當然有主觀偏好的成分，但如果這種區別會導致開發效率的提升，那麽它就有客觀的價值存在。
* 基於 HTML 的模板使得將已有的應用逐步遷移到 Vue 更為容易。
* 這也使得設計師和新人開發者更容易理解和參與到項目中。
* 你甚至可以使用其他模板預處理器，比如 Pug 來書寫 Vue 的模板。
> JSX 並不是沒有學習成本的——它是基於 JS 之上的一套額外語法。同時，正如同熟悉 JS 的人學習 JSX 會很容易一樣，熟悉 HTML 的人學習 Vue 的模板語法也是很容易的。
## 3. 向上擴展
Vue 和 React 都提供了強大的路由來應對大型應用。React 社區在狀態管理方面非常有創新精神 (比如 Flux、Redux)，而這些狀態管理模式甚至 Redux 本身也可以非常容易的集成在 Vue 應用中。
實際上，Vue 更進一步地采用了這種模式 (Vuex)，更加深入集成 Vue 的狀態管理解決方案 Vuex 相信能為你帶來更好的開發體驗。
兩者另一個重要差異是，Vue 的路由庫和狀態管理庫都是由官方維護支持且與核心庫同步更新的。React 則是選擇把這些問題交給社區維護，因此創建了一個更分散的生態系統。但相對的，React 的生態系統相比 Vue 更加繁榮。
## 4.構建項目
Vue 提供了 Vue-cli 腳手架，能讓你非常容易地構建項目，包含了 Webpack，Browserify，甚至 no build system。
React 在這方面也提供了create-react-app，但是現在還存在一些局限性：
* 它不允許在項目生成時進行任何配置，而 Vue 支持 Yeoman-like 定制。
* 它只提供一個構建單頁面應用的單一模板，而 Vue 提供了各種用途的模板。
* 它不能用用戶自建的模板構建項目，而自建模板對企業環境下預先建立協議是特別有用的。
而要註意的是這些限制是故意設計的，這有它的優勢。例如，如果你的項目需求非常簡單，你就不需要自定義生成過程。你能把它作為一個依賴來更新。如果閱讀更多關於不同的設計理念。
## 5.向下擴展
React 學習曲線陡峭，在你開始學 React 前，你需要知道 JSX 和 ES2015，因為許多示例用的是這些語法。你需要學習構建系統，雖然你在技術上可以用 Babel 來實時編譯代碼，但是這並不推薦用於生產環境。
就像 Vue 向上擴展好比 React 一樣，Vue 向下擴展後就類似於 jQuery。你只要把如下標簽放到頁面就可以運行：
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
然後你就可以編寫 Vue 代碼並應用到生產中，你只要用 min 版 Vue 文件替換掉就不用擔心其他的性能問題。
由於起步階段不需學 JSX，ES2015 以及構建系統，所以開發者只需不到一天的時間閱讀指南就可以建立簡單的應用程序。
## 6.原生渲染
React Native 能使你用相同的組件模型編寫有本地渲染能力的 APP (iOS 和 Android)。能同時跨多平臺開發，對開發者是非常棒的。
Vue 和 Weex 會進行官方合作，Weex 是阿裏巴巴發起的跨平臺用戶界面開發框架，同時也正在 Apache 基金會進行項目孵化，Weex 允許你使用 Vue 語法開發不僅僅可以運行在瀏覽器端，還能被用於開發 iOS 和 Android 上的原生應用的組件。
在現在，Weex 還在積極發展，成熟度也不能和 React Native 相抗衡。但是，Weex 的發展是由世界上最大的電子商務企業的需求在驅動，Vue 團隊也會和 Weex 團隊積極合作確保為開發者帶來良好的開發體驗。
另一個選擇是 NativeScript-Vue，一個用 Vue.js 構建完全原生應用的 NativeScript 插件。
基於 ant design兩種實現技術（React.js Vue.js）的比較
> 服務於企業級產品的設計體系，基於確定和自然的設計價值觀上的模塊化解決方案，讓設計者和開發者專註於更好的用戶體驗，基於ant框架下實現PC端和Mobile端的前端應用,看起來更加產品化，規範化。但是我覺得標準化的東西是犧牲部分個性化為前提的。
1. PC端的實現情況
- [ ant design of React](https://pro.ant.design/docs/new-component)
- [ant design of Vue](https://vue.ant.design/docs/vue/introduce/)
基於Ant Design框架搭建PC端很容易上手
2. 移動端ant design mobile
- React
[Ant Design Mobile]( https://mobile.ant.design/docs/react/introduce-cn)
這個官方只是簡單告訴組件，但是只要了解 React的相關開發和技術棧，也容易上手和集成
- Vue
基於ant design的Vue mobile 暫時沒有出來，但是可以Cube-UI實現移動端網頁，與ant design匹配度不高，需要自己改造，在開發效率上不如 React
3. 學習難度
- Vue 容易學，易上手，對傳統PC端寫慣了html,css,jquery很友好
- React 要額外掌握ES6和JSX語法
4. 開發社區、開發者情況
- [React 論壇](https://discuss.reactjs.org)
- [React 開發論壇](https://dev.to/t/react)
- [Vue 論壇](https://forum.vuejs.org/c/chinese)
- [Vue github 問題列表](https://github.com/vuejs/vue/issues)
- [React github問題列表](https://github.com/facebook/react/issues)
> React 屬於Facebook旗下項目，FaceBook出品必屬精品；Vue是個人開發團隊維護，要靠捐贈;React相對繁榮一些，但是Vue發展勢頭很猛！
5. 其它的實現框架
- [Vue PC端組件規範 element](http://element-cn.eleme.io/#/zh-CN)
- [Vue Mobile端UI組件 Cube-UI](https://didi.github.io/cube-ui/#/zh-CN/docs/quick-start)
總結
- ### **React** VS **Vue** 比較
-|React| Vue
---|---|---
==共性==|==1.用虛擬DOM實現快速渲染2.輕量級3.響應式組件==|==4.服務端渲染5.集成路由工具，打包工具，狀態管理工具的難度低6.優秀的支持和社區==
易用性|額外掌握ES6和JSX語法 | 熟悉HTML、CSS、JS 的前端開發者很友好
學習成本|額外掌握ES6和JSX語法，成本稍高 | 很容易上手
生態系統|更繁榮| 發展勢頭猛
適用項目|小而快的項目 | 大型項目，跨平臺應用
開發團隊| FaceBook官方維護|華裔尤雨溪目前在全職維護Vue，也有一些公司資助Vue
- ### Ant Design 下 React和Vue實現的比較
-| React|Vue
---|---|---
PC端| [ Ant Design Pro of React 腳手架（官方）](https://ant.design/docs/react/introduce-cn) | [官方無，腳手架市場上有antd-Vue-Pro](http://scaffold.ant.design/#/scaffolds/ant-design-pro-vue)
移動端(瀏覽器)| [antd-mobile-react腳手架（官方）](https://github.com/ant-design/antd-mobile-samples/tree/master/create-react-app)| 無，可以使用 cubeui 實現 antd設計規範，但有改造成本
原生應用|[ant-design-mobile-rn 跨平臺性好](https://github.com/ant-design/ant-design-mobile-rn)| Vue 和 Weex 在進行官方合作，Weex 本身是apache孵化項目，成熟度不能與RN比較
學習難度| 基於antd框架下，React比較成熟，跨平臺幸好，難度低|vue本身學習難度低，但是基於antd，實現手機端網頁設計，難度高
其它的實現框架| [Vue PC端組件規範 element](http://element-cn.eleme.io/#/zh-CN)|[Vue Mobile端UI組件 Cube-UI](https://didi.github.io/cube-ui/#/zh-CN/docs/quick-start)
### *個人意見*
>如果基於Ant Design設計規範下實現 PC端和Mobile端. 因為ant在PC和手機都有對應的實現，跨平臺性好 這樣PC端和UI端開發更規範，產品化。如果追求易上手，PC端和UI端可以個性化設計（當然也可以參照Ant的設計規範），從現有人員技術結構上來說，使用Vue 更容易打磨出成熟的架構與工作流之後，會提升團隊內的生產效率
---恢復內容結束---
Vue 和 React的比較