談?wù)刅ue和React的區(qū)別【沖擊30K專(zhuān)欄01】
最近剛好換了工作，把最近面試被面的問(wèn)題，以及現(xiàn)在大多數(shù)出現(xiàn)的面試題以一個(gè)專(zhuān)題的形式一次性總結(jié)，一天一題，現(xiàn)在總共匯總了
150道題，如果這些題都能答出來(lái)人人都能沖擊30k，每道題目答案沒(méi)有多余扯皮的部分，就是單純的答案。
今天的題目：談?wù)刅ue和React的區(qū)別？
1.數(shù)據(jù)流的不同
組件與DOM之間可以通過(guò) v-model 雙向綁定（雙向數(shù)據(jù)流） React單向數(shù)據(jù)響應(yīng)，需要手動(dòng)setState
2.監(jiān)聽(tīng)數(shù)據(jù)變化的實(shí)現(xiàn)原理不同
Vue通過(guò) getter/setter React默認(rèn)是通過(guò)比較引用的方式（diff）進(jìn)行的
3.代碼的復(fù)用
Vue是才有公共組件或者mixin的方式實(shí)現(xiàn)代碼的復(fù)用 React是通過(guò) HoC (高階組件）實(shí)現(xiàn)代碼的復(fù)用
4.組件通信的區(qū)別
Vue是通過(guò)props、on、children、EventBus、vuex、$root等方式實(shí)現(xiàn)組件通信 React可以通過(guò)props向子組件傳遞數(shù)據(jù)或者回調(diào)或者context實(shí)現(xiàn)組件通信
5.模板渲染方式的不同
Vue是通過(guò)一種拓展的HTML語(yǔ)法進(jìn)行渲染（其實(shí)Vue也是可以使用JSX） Vue是在和組件JS代碼分離的單獨(dú)的模板中，通過(guò)指令來(lái)實(shí)現(xiàn)的，比如條件語(yǔ)句就需要 v-if 來(lái)實(shí)現(xiàn)
React 是通過(guò)JSX渲染模板
React是在組件JS代碼中，通過(guò)原生JS實(shí)現(xiàn)模板中的常見(jiàn)語(yǔ)法，比如插值，條件，循環(huán)等，都是通過(guò)JS語(yǔ)法實(shí)現(xiàn)的
6.diff算法不同
vue比對(duì)節(jié)點(diǎn)，當(dāng)節(jié)點(diǎn)元素類(lèi)型相同，但是className不同，認(rèn)為是不同類(lèi)型元素，刪除重建，而react會(huì)認(rèn)為是同類(lèi)型節(jié)點(diǎn)，只是修改節(jié)點(diǎn)屬性
vue的列表比對(duì)，采用從兩端到中間的比對(duì)方式，而react則采用從左到右依次比對(duì)的方式。當(dāng)一個(gè)集合，只是把最后一個(gè)節(jié)點(diǎn)移動(dòng)到了第一個(gè)，react會(huì)把前面的節(jié)點(diǎn)依次移動(dòng)，而vue只會(huì)把最后一個(gè)節(jié)點(diǎn)移動(dòng)到第一個(gè)。總體上，vue的對(duì)比方式更高效。
7.Vuex 和 Redux 的區(qū)別
Vuex 更加靈活一些，組件中既可以 dispatch action 也可以 commit updates，而 Redux 中只能進(jìn)行 dispatch，并不能直接調(diào)用 reducer 進(jì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)比較的
8.數(shù)據(jù)聲明和使用的方式不同
vue中的數(shù)據(jù)由data屬性在Vue對(duì)象中進(jìn)行管理，react中的數(shù)據(jù)由state屬性管理； vue通過(guò)slot插槽進(jìn)行嵌套傳遞，react通過(guò)“props.children”的方式將標(biāo)簽內(nèi)的部分傳遞給子組件。
說(shuō)明
每天一到面試題，人人都能沖擊
30k+，點(diǎn)擊↓關(guān)注【鬼哥】我當(dāng)前進(jìn)度【#001題】，如果你能點(diǎn)贊分享、鬼哥騎自行車(chē)也是開(kāi)心的
參考資料
https://cnblogs.com/mengff/p/12828825.html https://zhuanlan.zhihu.com/p/43494278 https://m.php.cn/article/464234.html https://segmentfault.com/a/1190000019208626