別點(diǎn)哈哈哈哈哈

大家別點(diǎn)

使用 Virtual DOM

提供了響應(yīng)式 (Reactive) 和組件化 (Composable) 的視圖組件。

將注意力集中保持在核心庫(kù)近迁，而將其他功能如路由和全局狀態(tài)管理交給相關(guān)的庫(kù)簸州。

react的生命周期

vue的生命周期

性能

Vue宣稱可以更快地計(jì)算出Virtual DOM的差異岸浑，這是由于它在渲染過(guò)程中，會(huì)跟蹤每一個(gè)組件的依賴關(guān)系璧眠，不需要重新渲染整個(gè)組件樹(shù)读虏。

當(dāng)應(yīng)用的狀態(tài)被改變時(shí)，React全部子組件都會(huì)重新渲染灾螃。這可以通過(guò)shouldComponentUpdate這個(gè)生命周期方法來(lái)進(jìn)行控制睦焕，而Vue將此視為默認(rèn)的優(yōu)化靴拱。

組件化

應(yīng)用分拆成一個(gè)個(gè)功能明確的模塊，每個(gè)模塊之間可以通過(guò)合適的方式互相聯(lián)系本谜。

Vue組件中HTML偎窘，JavaScript和CSS都寫(xiě)在一個(gè)文件之中溜在；

vue某組件

React是all in js掖肋，通過(guò)js來(lái)生成html赏参，JavaScript與JSX被寫(xiě)入同一個(gè)組件文件中。

react某組件

對(duì)象屬性

vue中,state對(duì)象不是必須的,數(shù)據(jù)由data屬性在vue對(duì)象中管理纫溃；
state對(duì)象在react應(yīng)用中不可變的,需要使用setState方法更新?tīng)顟B(tài);

組件傳值

React:

父到子紊浩，父組件自定義屬性疗锐，子通過(guò)props來(lái)獲取父的屬性值

子到父，在父組件綁定callbackParent={this.onChildChanged}呜袁，在子組件利用this.props.callbackParent(newState),觸發(fā)了父級(jí)的的this.onChildChanged方法简珠，進(jìn)而將子組件的數(shù)據(jù)（newState）傳遞到了父組件。（依賴 props 來(lái)傳遞事件的引用膘融，并通過(guò)回調(diào)的方式來(lái)實(shí)現(xiàn)傳值）

Vue:

父到子氧映，子組件通過(guò)props來(lái)接收數(shù)據(jù)

子到父脱货，this.$emit('方法', '值');

狀態(tài)管理

Redux：

通過(guò)action創(chuàng)建函數(shù)，可以創(chuàng)建action~

創(chuàng)建?reducer臼疫，reducer是一個(gè)純函數(shù)扣孟，接收action和舊的state,生成新的state.

一個(gè)項(xiàng)目有很多的reducers,我們要把他們整合到一起.

創(chuàng)建一個(gè)store：維持應(yīng)用的 state；提供 getState() 方法獲取 state鸽斟；提供 dispatch(action) 觸發(fā)reducers方法更新 state；?

創(chuàng)建action? (src/redux/actions/counter.js)

創(chuàng)建?reducer??(src/redux/reducers/counter.js?)

整合reducers (src/redux/reducers.js)

?(?src/redux/store.js)

使用

react-redux提供了一個(gè)方法connect立倍。connect接收兩個(gè)參數(shù)，一個(gè)mapStateToProps,就是把redux的state比伏，轉(zhuǎn)為組件的Props胜卤，還有一個(gè)參數(shù)是mapDispatchToprops，就是把發(fā)射actions的方法澈段，轉(zhuǎn)為Props屬性函數(shù)舰攒。

Vuex:

大家都用過(guò)? ?我就不說(shuō)了

store注入和使用方式有一些區(qū)別??

在Vuex中摩窃，$store被直接注入到了組件實(shí)例中，因此可以比較靈活的使用：使用dispatch鹦聪、commit提交更新蒂秘，通過(guò)mapState或者直接通過(guò)this.$store來(lái)讀取數(shù)據(jù)。Vuex更加靈活一些姻僧，組件中既可以dispatch?action，也可以commit?updates赌莺。

在Redux中松嘶，我們每一個(gè)組件都需要顯示的用connect把需要的props和dispatch連接起來(lái)。Redux中只能進(jìn)行dispatch缓升，不能直接調(diào)用reducer進(jìn)行修改。

實(shí)現(xiàn)原理上來(lái)說(shuō)骇吭，最大的區(qū)別是兩點(diǎn)：Redux使用的是不可變數(shù)據(jù)歧寺，而Vuex的數(shù)據(jù)是可變的，因此斜筐，Redux每次都是用新state替換舊state，而Vuex是直接修改目代。Redux在檢測(cè)數(shù)據(jù)變化的時(shí)候嗤练，是通過(guò)diff的方式比較差異的，而Vuex其實(shí)和Vue的原理一樣霜大，是通過(guò)getter/setter來(lái)比較的革答。

路由

React中，需要引入react-router庫(kù)途茫，使用時(shí)蹦骑，路由器Router就是React的一個(gè)組件。

Router

Link組件用于取代元素边败，生成一個(gè)鏈接 捎废，跳轉(zhuǎn)路由

Vue中，添加vue-router排截，需要將組件(components)映射到路由(routes)，然后告訴 vue-router 在哪里渲染它們断傲。

?腳手架

React：create-react-app

Vue:?vue-cli?

就這樣叭

Vue官方對(duì)比其他框架