本文原鏈接:https://www.cnblogs.com/zhuzhenwei918/p/7447434.html
vue與react
vue和react是當前最火的兩個前端框架,vue的發展很快,但是目前來說,react的生態系統會更強大,世界上使用這個框架的人也很多。 另外,react是facebook官方維護的, 而vue是尤雨溪本人維護的。 並且在其他周邊庫,如react的react-rouer和redux,是react社區在維護的。 而vue的vuex和vue-router都是尤雨溪在維護的。
1、都在使用 Virtual DOM, 當然,不得不說,vue的虛擬DOM一定是從react這里模仿的,但是好的東西就是需要被模仿的,而沒有必要重復的造輪子,所以沒毛病。使用虛擬DOM的好處就很多了,比如通過虛擬DOM結合diff算法,我們可以很好地解決DOM操作的性能問題,即 生成虛擬DOM的時間 + diff算法時間 + patch時間 < 修改DOM省下來的時間,當然,如果某一天DOM操作很快,那么就不存在這個問題了。react可能就會被其他框架取代了。 另外, 使用虛擬DOM,可以使得JavaScript的應用不僅僅局限於網頁,還可以是ios、安卓等,因為在react中沒有用到html,用到的時jsx,虛擬dom,最后生成的可以是用在網頁上的html,也可以是用在安卓和ios的控件,所以,react-native的大火也就可想而知了。 、
2、都提供了響應式(Reactive)和組件化(Composable)的視圖組件。
react和vue中的組件都是核心, 是整個框架的靈魂,之前我們使用的都是以頁面為基本單位的,但是卻不知道組件的好處。
首先通過組件化以后,這個組件就是可復用的了,比如如果使用傳統方式寫一個網站,如果標題和結尾都是一樣的,那我們可能會不斷的復制、粘貼,但是呢,如果使用了組件化的思想,只需要寫好組件,然后在需要的地方插入組件即可。
又比如vue中的單文件組件,我們寫一個組件,就知道是什么含義,並且css和js都可以寫在一個文件里, css通過屬性 scoped 可以防止css的類名污染。 而對於template也可以放心的使用,不用擔心重復的問題。
基於react的UI庫ant.design,我們還可以直接調用這些組件,大大地加快了前端開發的速度和效率,所以,組件的使用,絕對是前端的一小步,歷史的一大步。
3、都將注意力集中保持在核心庫,而將其他功能如路由和全局狀態管理交給相關的庫。
即vue和react都是專注於視圖的框架,只是在局部區域,vue提供了雙向數據綁定,這樣更有利於我們處理表單等問題,而react在這方面就有了一定的劣勢。。
而如果希望做大型的項目,對於vue來說,就可以使用vue-router,來構建大型網站的路由; 狀態復雜,不好管了,我們就使用vuex; 所以,這也就是官網所說的漸進式的框架 了 。同樣的,react也是可以直接使用的,包括react-router和redux,方便我們構建大型應用。 只是前者的周邊庫是由尤雨溪維護,后者是由react龐大的社區維護的。
4、vue比react更容易上手。
這一點是毋庸置疑的,為什么這么說呢? 因為對於vue,無論你是使用webpack還是broserify, vue-cli都可以很好地滿足你的開發任務。
學習vue,我們只需要掌握中級的html、css、js即可,在head中引入一個vue.js庫,就可以直接使用了。並且對於數據雙向綁定、指定等都可以很好地體現。
但是react的學習會更加復雜一些,react需要有ES6的基礎,因為react組件的創建多是使用es6的class來創建的,所以會更加麻煩一些,並且對於JSX語法,還是有一定的學習成本的。
因此我們說vue更容易上手。
5、 性能都很好。
vue和react都采用了虛擬DOM的方式,所以在性能方面是非常地接近的,這個無需多說,
6、vue的優化做的要比react好一些。
在 React 應用中,當某個組件的狀態發生變化時,它會以該組件為根,重新渲染整個組件子樹。如要避免不必要的子組件的重渲染,你需要在所有可能的地方使用 PureComponent
,或是手動實現 shouldComponentUpdate
方法。同時你可能會需要使用不可變的數據結構來使得你的組件更容易被優化。 然而,使用 PureComponent
和 shouldComponentUpdate
時,需要保證該組件的整個子樹的渲染輸出都是由該組件的 props 所決定的。如果不符合這個情況,那么此類優化就會導致難以察覺的渲染結果不一致。這使得 React 中的組件優化伴隨着相當的心智負擔。
而在做vue相關的項目時,我們只需要關注於業務邏輯,而不需要去操心是否會產生不必要的組件渲染,因為vue已經把這些麻煩的東西很好的解決了。
7、vue和react同樣都支持本地渲染。
React Native 能使你用相同的組件模型編寫有本地渲染能力的 APP(iOS 和 Android)。能同時跨多平台開發,對開發者是非常棒的。相應地,Vue 和 Weex 會進行官方合作,Weex 是阿里的跨平台用戶界面開發框架,Weex 的 JavaScript 框架運行時用的就是 Vue。這意味着在 Weex 的幫助下,你使用 Vue 語法開發的組件不僅僅可以運行在瀏覽器端,還能被用於開發 iOS 和 Android 上的原生應用。
一句話: 你寫的組件不僅可以跑在瀏覽器的網頁上,也可以泡在安卓和ios的app里。
8、 react更為繁榮。
react社區還是非常繁榮的,所以在知名度方面react也是更勝一籌,使用react和react-native的開發人員還是很多的,這也是vue需要學習和進步的地方。
9、 vue寫起來更加流暢、方便, react語法更簡單、擴展更強大。
在這一方面,react和vue的出發點似乎是不一樣的,但是我還是比較喜歡vue的寫法。 比如,對於列表循環,使用vue,直接在標簽上寫 v-for 即可,然后就可以直接循環了,而react需要通過一個數組的map,然后在return,在形式上來說,vue的寫法還是更加舒服一點。 另外,由於vue局部的數據雙向綁定,所以vue在處理表單這一塊也是游刃有余,非常方便,而react僅僅是處理一個表單,就需要添加很多無關的代碼,這個還是非常別扭的。
可以看得出來,vue提供了更多的api,可以做更多的事情,但是, 這也體現了react的優點,即非常簡單,提供的api很少,它只幫我們做了虛擬DOM的工作,其他的事情可以讓我們自由的發揮,所以從這個角度來說,react還是更加簡單一些的。
10、 vue的文檔更加好。
雖然react也有中文文檔,但是vue的文檔更新的更頻繁,並且寫的很好,我們可以很容易地學習。 畢竟大佬是中國的,還是很不錯的,推薦初學者學習、使用。
11、 無論是vue還是react我們都不需要觸碰DOM。
就這兩者而言,我們都關心虛擬DOM,而不用去觸碰DOM,這些都是vue幫助我們處理好的了。因為dom的操作是費時的,所以通過vue,我們可以很好地解決這些問題,盡可能少的減少DOM。 一般來說,對於一個項目,我們使用了vue或者是react,jquery基本上就是不需要的了。如果真的需要,看看到底哪里做的不對。
12、vue對於事件的清除優於react。
在vue中,事件綁定之后,可以在組件銷毀的同時事件接觸綁定,無需我們自己去手動清除; 而react卻不是這樣的,react需要我們在 componentDidMount 的時候綁定,在 componentWillUnMount 的時候接觸綁定,否則會出現問題,尤其是添加在 document 上面的事件 。
vue與angular
兩者都是數據雙向綁定的框架,我也只是看了看angular的api,沒有真正的用過,所以對於angular只能有一個簡單的比較
1、 angular和vue都使用了指令。
指令是一個比較方便的操作, 而vue作者的指令的靈感也都是從angular而來的,所以vue總體來說還是react和angular的結合體,他把兩者的優點做了結合,把缺點去除,所以,vue是個好東西,可惜不完全是原創,但是也足夠讓我們敬佩了。
2、 vue比angular的設計更簡單。
在api上,雖然vue比react復雜一些,但是angular更加復雜。
3、 vue更容易上手。
在vue和react的比較中,我們就知道vue對於小白來說很容易就可以上手了, 而angular還要學習typescript等等,上手難度較大。
4、angular的雙向數據綁定不容易控制。
在vue中,局部使用數據雙向綁定,但是全局而言使用的數據單向綁定。 而angular使用的確實數據雙向綁定,所以vue更容易管理狀態。
5、 性能上來說vue更好一些。
因為vue不需要使用angular的臟檢查,一些vue都已經給你做好了。 在 AngularJS 中,當 watcher 越來越多時會變得越來越慢,因為作用域內的每一次變化,所有 watcher 都要重新計算。並且,如果一些 watcher 觸發另一個更新,臟檢查循環(digest cycle)可能要運行多次。AngularJS 用戶常常要使用深奧的技術,以解決臟檢查循環的問題。有時沒有簡單的辦法來優化有大量 watcher 的作用域。Vue 則根本沒有這個問題,因為它使用基於依賴追蹤的觀察系統並且異步隊列更新,所有的數據變化都是獨立觸發,除非它們之間有明確的依賴關系。
react與angular
1、 兩者的社區基礎都很好。
react是facebook的,angular是谷歌的,所以,我們不用擔心其社區基礎。
2、 angular是一個真正的框架,react是一個庫。
react不是框架。 angular自身就繼承了各種插件,所以,我們不需要再過多的考慮,它已經提供給你了各種解決辦法,而react是比較輕的,只是解決了其中的某個痛點而已。
3、就性能而言,react更好。
react提出了虛擬DOM這個關鍵,很好地提升了性能,這一點要比angular強大。
三大框架與jQuery的對比
盡管三大框架目前都是非常流行的,但是不得不說,jQuery的使用還是大多數(90%),但是選擇三大框架還是選擇jQuery?
- 如果你要做單頁面應用,那么你就選擇三大框架; 如果你要做多頁應用,你就選擇jQuery。
- 如果你的數據都是在在服務器端進行修改的,那么毫無疑問,使用三大框架你也沒法管理數據,所以使用jQuery; 但是,如果你的數據都是在客戶端的,即前端需要處理大量的數據,那么這時就需要選用三大框架了,比如vue的store倉庫、比如react的store,他們對於數據的存儲都有很好的管理能力。 單項數據流更使得應用便於管理,如react的store -> view -> action -> store -> view -> action。。。 如此循環往復的單項數據流。
- 如果你要頻繁的手動操作DOM,那么選擇jQuery,畢竟jQuery封裝了大量的兼容性的DOM操作api; 而如果你的項目是數據驅動的,那么選擇vue、react,因為你只要給定數據,就可以使得頁面得到渲染了, 而不需要操作dom,或者說,有了react,dom操作就不存在了。