BootStrap, React, Vue的比較
目前, 個人瞭解的前端比較流行的框架是三個:
BootStrap, React, Vue
想要為公司選一個作為接下來的前端技術研發方向, 因此作了一番調查, 有點淺見.
BootStrap:
特點是柵格系統, 使用簡單, 上手容易. 專為響應式頁面而生. 一套程式碼就可以自適應平板電腦和PC.
缺點在於, 缺少一套有力的成體系的元件(當時調查的時候還沒有, 現在據說有了), 我在實際使用時, 發生了作用域衝突的問題, 如果沒有整理好一整套元件, 開發很累.
React:
特點主要有2個:
1. 資料的單向響應.當資料發生變化的時候, React將會自動的管理UI介面更新
2. VisualDom(虛擬Dom). 由React來管理Dom樹的變化, 開發者只需使用React的虛擬Dom進行開發, 頁面的呈現會更快.
這個引申出了一個更大的優點: 虛擬Dom到真實Dom的對映, 是由React來控制的. 那麼如果虛擬Dom對映為IOS或者Android呢? 於是React Native誕生了, 約80%的Reactive Native程式碼是可以同時支援IOS和Android的.
缺點在於, 最近React的GPL協議有變動, 容易引起商業問題…
Vue:
特點在於, 站在了React的肩膀上, 許多方面更出色了:
1. 資料的雙向繫結. 資料改, 頁面改. 頁面改, 資料也改.
2. 頁面的呈現據說比React還快.
3. 元件化(實際上React也有元件化). 這和BootStrap這種元件化的概念還有點不同, Vue的元件化, 已經把作用域衝突的問題給搞定了.另外, js測試也變得更專業化了(有點類似junit).
4. 單html開發. 它的開發模式, 是一個html, 然後不停替換元件對應的js來切換顯示效果. html中的共通js和css只需要download一次, 理論上比Iframe頁面的呈現更快.
5. 結合node.js提供的webpack等, 可以進行成體系的打包釋出.
缺點在於, 上手難度比較高, 並且大規模開發的化, 需要有體系化開發的積累. Vue的元件化開發推薦使用Element: http://element.eleme.io/#/zh-CN/component/popover
結論:
長遠考慮的話, 建議使用Vue+node.js. 短期內使用的話, BootStrap是個不錯的選擇
參考資料:
Vue官方API文件:https://cn.vuejs.org/v2/api/
友情連結:https://www.jikedaquan.com/
相關文章
- Vue與React比較VueReact
- React與Vue模板使用比較(一、vue模板與React JSX比較)ReactVueJS
- react-redux的淺比較ReactRedux
- Flutter與React Native的比較FlutterReact Native
- React.js和Vue.js的語法並列比較ReactVue.js
- VUE中diff比較Vue
- react和vue的渲染流程對比ReactVue
- [譯] 原生 iOS(Swift) 和 React-Native 的效能比較iOSSwiftReact
- Vue.js構建工具比較Vue.js
- Vue和微信小程式的區別、比較Vue微信小程式
- SAP UI5和React的頁面渲染效能比較UIReact
- 【譯】Flutter vs React Native vs Native:深度效能比較FlutterReact Native
- react比vue難?vuer10分鐘速覽reactReactVue
- Vue和React的檢視更新機制對比VueReact
- Vue2 和 Vue3 效能比較小實驗Vue
- Integer的比較
- 原生移動應用框架React Native與Flutter比較框架React NativeFlutter
- Vue-Router和React-Routerd對比VueReact
- Vue中的計算屬性和偵聽器比較Vue
- js 深比較和淺比較JS
- Go和Python比較的話,哪個比較好?GoPython
- Vue與React兩個框架的粗略區別對比VueReact框架
- 集合類的比較
- 比較2018年的Angular和React 2018 - 沒有人告訴你的差異AngularReact
- Oracle date 型別比較和String比較Oracle型別
- 字串比較字串
- Integer比較
- 比較集合
- 效能比較
- 比較典的莫比烏斯反演
- iOS 版本號的比較iOS
- 幾種排序的比較排序
- 比較重要的例題
- ==和equals方法的比較
- volatile與Atomic的比較
- 浮點數的比較
- ImageMagic 和 GraphicsMagick 的比較
- ArrayList和LinkedList的比較