1.前端框架發展歷程?為什么大家拋下jQuery選擇Vue、react、angular?為什么Ext、backbone會被冷落?
MVC->MVP(backbone.js)->MVVM()
2.現階段前端框架中的三駕馬車Vue、react之間的比較?
2.1相同點:
1.兩者都支持服務端渲染(ssr=Server-side rendering)
2.都有Virtual DOM,組件化開發的概念,通過props參數進行父子組件之間數據的傳遞,都實現了webComponent規范
3.數據驅動視圖(響應式ui)
4.都有支持native的方案,react native 、weex
2.2不同點:
1.react嚴格意義上講只針對MVC中的view層,Vue則是MVVM模式
2.Vitual Dom 不一樣,Vue會跟蹤每一個組件的依賴關系,不需要重新渲染整個組件樹,而react每當應用的狀態被改變時,全部組件都會被渲染,所以react需要shouldComponentUpdate這個生命周期函數方法來進行控制
3.組件寫法不同,react主張jsx+inline style,也就是講HTML、css寫到js中,一切皆js,vue則是webpack+Vue-loader的單文件組件格式,即HTML、css、js組成一個文件形成.vue文件
4.數據綁定,Vue實現了數據的雙向綁定,react數據流動是單向的
5.state對象在react應用中不可變,需要使用setState方法更新狀態,在Vue中,state對象不是必須的,數據由data屬性在Vue對象中管理;
2.3兩個框架的核心內容:
1.響應式UI(數據驅動視圖)
2.Vitual Dom
3.組件系統
三者在開發效率、頁面性能、代碼復用方面都有極大的作用
3.react、Vue框架全面對比
這篇文章記錄我在使用Vue和React的時候,對他們的不同之處的一些思考,不僅局限於他們本身,也會包括比如 Vuex/Redux 等經常搭配使用的工具。因為涉及到的內容很多,可能下面的每一個點都能寫成一篇文章,這次先簡單做一個概要,等我有空做一個詳細的專題出來。
3.1監聽數據變化的實現原理不同
-
Vue 通過 getter/setter 以及一些函數的劫持,能精確知道數據變化,不需要特別的優化就能達到很好的性能
-
React 默認是通過比較引用的方式進行的,如果不優化(PureComponent/shouldComponentUpdate)可能導致大量不必要的VDOM的重新渲染
為什么 React 不精確監聽數據變化呢?這是因為 Vue 和 React 設計理念上的區別,Vue 使用的是可變數據,而React更強調數據的不可變。所以應該說沒有好壞之分,Vue更加簡單,而React構建大型應用的時候更加魯棒。
因為一般都會用一個數據層的框架比如 Vuex 和 Redux,所以這部分不作過多解釋,在最后的 vuex 和 redux的區別 中也會講到。
3.2數據流的不同
大家都知道Vue中默認是支持雙向綁定的。在Vue1.0中我們可以實現兩種雙向綁定:
-
父子組件之間,props 可以雙向綁定
-
組件與DOM之間可以通過 v-model 雙向綁定
在 Vue2.x 中去掉了第一種,也就是父子組件之間不能雙向綁定了(但是提供了一個語法糖自動幫你通過事件的方式修改),並且 Vue2.x 已經不鼓勵組件對自己的 props 進行任何修改了。
所以現在我們只有 組件 <--> DOM 之間的雙向綁定這一種。
然而 React 從誕生之初就不支持雙向綁定,React一直提倡的是單向數據流,他稱之為 onChange/setState()模式。
不過由於我們一般都會用 Vuex 以及 Redux 等單向數據流的狀態管理框架,因此很多時候我們感受不到這一點的區別了。
3.3HoC 和 mixins
在 Vue 中我們組合不同功能的方式是通過 mixin,而在React中我們通過 HoC (高階組件)。
React 最早也是使用 mixins 的,不過后來他們覺得這種方式對組件侵入太強會導致很多問題,就棄用了 mixinx 轉而使用 HoC,關於mixin究竟哪里不好,可以參考React官方的這篇文章 Mixins Considered Harmful
而 Vue 一直是使用 mixin 來實現的。
為什么 Vue 不采用 HoC 的方式來實現呢?
高階組件本質就是高階函數,React 的組件是一個純粹的函數,所以高階函數對React來說非常簡單。
但是Vue就不行了,Vue中組件是一個被包裝的函數,並不簡單的就是我們定義組件的時候傳入的對象或者函數。比如我們定義的模板怎么被編譯的?比如聲明的props怎么接收到的?這些都是vue創建組件實例的時候隱式干的事。由於vue默默幫我們做了這么多事,所以我們自己如果直接把組件的聲明包裝一下,返回一個高階組件,那么這個被包裝的組件就無法正常工作了。
推薦一篇很棒的文章講的是vue中如何實現高階組件 探索Vue高階組件
4.組件通信的區別
其實這部分兩個比較相似。
在Vue 中有三種方式可以實現組件通信:
-
父組件通過 props 向子組件傳遞數據或者回調,雖然可以傳遞回調,但是我們一般只傳數據,而通過 事件的機制來處理子組件向父組件的通信
-
子組件通過 事件 向父組件發送消息
-
通過 V2.2.0 中新增的 provide/inject 來實現父組件向子組件注入數據,可以跨越多個層級。
另外有一些比如訪問 $parent/$children等比較dirty的方式這里就不講了。
在 React 中,也有對應的三種方式:
-
父組件通過 props 可以向子組件傳遞數據或者回調
-
可以通過 context 進行跨層級的通信,這其實和 provide/inject 起到的作用差不多。
可以看到,React 本身並不支持自定義事件,Vue中子組件向父組件傳遞消息有兩種方式:事件和回調函數,而且Vue更傾向於使用事件。但是在 React 中我們都是使用回調函數的,這可能是他們二者最大的區別。
5.模板渲染方式的不同
在表層上, 模板的語法不同
-
React 是通過JSX渲染模板
-
而Vue是通過一種拓展的HTML語法進行渲染
但其實這只是表面現象,畢竟React並不必須依賴JSX。
在深層上,模板的原理不同,這才是他們的本質區別:
-
React是在組件JS代碼中,通過原生JS實現模板中的常見語法,比如插值,條件,循環等,都是通過JS語法實現的
-
Vue是在和組件JS代碼分離的單獨的模板中,通過指令來實現的,比如條件語句就需要 v-if 來實現
對這一點,我個人比較喜歡React的做法,因為他更加純粹更加原生,而Vue的做法顯得有些獨特,會把HTML弄得很亂。舉個例子,說明React的好處:
react中render函數是支持閉包特性的,所以我們import的組件在render中可以直接調用。但是在Vue中,由於模板中使用的數據都必須掛在 this 上進行一次中轉,所以我們import 一個組件完了之后,還需要在 components 中再聲明下,這樣顯然是很奇怪但又不得不這樣的做法。
6.Vuex 和 Redux 的區別
從表面上來說,store 注入和使用方式有一些區別。
在 Vuex 中,$store 被直接注入到了組件實例中,因此可以比較靈活的使用:
-
使用 dispatch 和 commit 提交更新
-
通過 mapState 或者直接通過 this.$store 來讀取數據
在 Redux 中,我們每一個組件都需要顯示的用 connect 把需要的 props 和 dispatch 連接起來。
另外 Vuex 更加靈活一些,組件中既可以 dispatch action 也可以 commit updates,而 Redux 中只能進行 dispatch,並不能直接調用 reducer 進行修改。
從實現原理上來說,最大的區別是兩點:
-
Redux 使用的是不可變數據,而Vuex的數據是可變的。Redux每次都是用新的state替換舊的state,而Vuex是直接修改
-
Redux 在檢測數據變化的時候,是通過 diff 的方式比較差異的,而Vuex其實和Vue的原理一樣,是通過 getter/setter來比較的(如果看Vuex源碼會知道,其實他內部直接創建一個Vue實例用來跟蹤數據變化)
而這兩點的區別,其實也是因為 React 和 Vue的設計理念上的區別。React更偏向於構建穩定大型的應用,非常的科班化。相比之下,Vue更偏向於簡單迅速的解決問題,更靈活,不那么嚴格遵循條條框框。因此也會給人一種大型項目用React,小型項目用 Vue 的感覺。
7.vue和react之間的區別?
相同點:
- 都支持
SSR
- 都有
Virtual DOM
- 組件化開發
- 數據驅動
- ...
不同點:
- vue推薦的是使用 webpack + vue-loader 的單文件組件格式,React 推薦的做法是 JSX + inline style
- vue 的
Virtual DOM
是追蹤每個組件的依賴關系,不會渲染整個組件樹,react 每當應該狀態被改變時,全部子組件都會 re-render - ...