继夫的玩弄H辣文的小说|女人与拘性猛交视频|精品欧美高清不卡高清|一起做亏亏的事情的视频|啦啦啦在线视频观看|望月直播下载ios版本|国产日韩欧美一区二区三区

  1. 首頁 > 生活 > >

vue和react的區別是什么

生活知道生活百科

vue和react的區別

vue和react的區別是什么

文章插圖
1、監聽數據變化的實現原理不同
Vue通過 getter/setter以及一些函數的劫持，能精確知道數據變化 。
React默認是通過比較引用的方式（diff）進行的，如果不優化可能導致大量不必要的VDOM的重新渲染 。為什么React不精確監聽數據變化呢？這是因為Vue和React設計理念上的區別，Vue使用的是可變數據，而React更強調數據的不可變，兩者沒有好壞之分，Vue更加簡單 ， 而React構建大型應用的時候更加魯棒 。
2、數據流的不同
vue和react的區別是什么

文章插圖
Vue1.0中可以實現兩種雙向綁定：父子組件之間，props可以雙向綁定；組件與DOM之間可以通過v-model雙向綁定 。Vue2.x中去掉了第一種 ， 也就是父子組件之間不能雙向綁定了（但是提供了一個語法糖自動幫你通過事件的方式修改），并且Vue2.x已經不鼓勵組件對自己的 props進行任何修改了 。
React一直不支持雙向綁定，提倡的是單向數據流 ， 稱之為onChange/setState()模式 。不過由于我們一般都會用Vuex以及Redux等單向數據流的狀態管理框架，因此很多時候我們感受不到這一點的區別了 。
3、HoC和mixins
Vue組合不同功能的方式是通過mixin，Vue中組件是一個被包裝的函數，并不簡單的就是我們定義組件的時候傳入的對象或者函數 。比如我們定義的模板如何被編譯的？比如聲明的props如何接收到的？這些都是vue創建組件實例的時候隱式干的事 。由于vue默默幫我們做了這么多事 ， 所以我們自己如果直接把組件的聲明包裝一下，返回一個HoC ， 那么這個被包裝的組件就無法正常工作了 。
React組合不同功能的方式是通過HoC(高階組件） 。React最早也是使用mixins的，不過后來他們覺得這種方式對組件侵入太強會導致很多問題，就棄用了mixinx轉而使用HoC 。高階組件本質就是高階函數，React的組件是一個純粹的函數，所以高階函數對React來說非常簡單 。
4、組件通信的區別
vue和react的區別是什么

文章插圖
Vue中有三種方式可以實現組件通信：父組件通過props向子組件傳遞數據或者回調，雖然可以傳遞回調，但是我們一般只傳數據；子組件通過事件向父組件發送消息；通過V2.2.0中新增的provide/inject來實現父組件向子組件注入數據，可以跨越多個層級 。
React中也有對應的三種方式：父組件通過props可以向子組件傳遞數據或者回調；可以通過 context 進行跨層級的通信，這其實和 provide/inject 起到的作用差不多 。React 本身并不支持自定義事件 ， 而Vue中子組件向父組件傳遞消息有兩種方式：事件和回調函數，但Vue更傾向于使用事件 。在React中我們都是使用回調函數的，這可能是他們二者最大的區別 。
5、模板渲染方式的不同
在表層上，模板的語法不同，React是通過JSX渲染模板 。而Vue是通過一種拓展的HTML語法進行渲染，但其實這只是表面現象，畢竟React并不必須依賴JSX 。
在深層上，模板的原理不同，這才是他們的本質區別：React是在組件JS代碼中，通過原生JS實現模板中的常見語法，比如插值，條件 ， 循環等，都是通過JS語法實現的，更加純粹更加原生 。而Vue是在和組件JS代碼分離的單獨的模板中，通過指令來實現的，比如條件語句就需要 v-if 來實現對這一點，這樣的做法顯得有些獨特，會把HTML弄得很亂 。
舉個例子，說明React的好處：react中render函數是支持閉包特性的，所以我們import的組件在render中可以直接調用 。但是在Vue中，由于模板中使用的數據都必須掛在 this 上進行一次中轉，所以我們import 一個組件完了之后，還需要在 components 中再聲明下，這樣顯然是很奇怪但又不得不這樣的做法 。
6、渲染過程不同
Vue可以更快地計算出Virtual DOM的差異，這是由于它在渲染過程中，會跟蹤每一個組件的依賴關系 ， 不需要重新渲染整個組件樹 。
React在應用的狀態被改變時，全部子組件都會重新渲染 。通過shouldComponentUpdate這個生命周期方法可以進行控制 ， 但Vue將此視為默認的優化 。
如果應用中交互復雜，需要處理大量的UI變化 ， 那么使用Virtual DOM是一個好主意 。如果更新元素并不頻繁，那么Virtual DOM并不一定適用 ， 性能很可能還不如直接操控DOM 。
7、框架本質不同
Vue本質是MVVM框架，由MVC發展而來；
React是前端組件化框架，由后端組件化發展而來 。
8、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來比較的，這兩點的區別 ， 也是因為React和Vue的設計理念不同 。React更偏向于構建穩定大型的應用，非常的科班化 。相比之下 ， Vue更偏向于簡單迅速的解決問題，更靈活，不那么嚴格遵循條條框框 。因此也會給人一種大型項目用React ， 小型項目用Vue的感覺 。
【vue和react的區別是什么】