您好,登錄后才能下訂單哦!
這篇文章給大家介紹面試題:react和vue有什么不同,內(nèi)容非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對(duì)大家能有所幫助。
首先,來說明下這些字母代表的含義
M:Model 模型
V:View 視圖
C:Controller 控制器
VM:ViewModel 視圖模型
首先說下MVC,大家肯定也知道三大框架中的另外一個(gè)(anuglar)。
如果你寫過angular那就肯定能很清楚的了解這個(gè)含義,看如下代碼:
<input ng-model="ball.basketball" /> .contronller('BallController', ($scope) => { const ball = { basketball: '我是蔡徐坤' } $scope.ball = ball })
input標(biāo)簽很好理解,就是MVC中的V(view)視圖。
controller顧名思義,就是MVC中的C(controller)控制器。
ball的話就是MVC中的M(model)模型。
MVC的概念很簡(jiǎn)單,你要展示一個(gè)籃球的頁(yè)面。
設(shè)置一個(gè)籃球的模型放在那等待使用。
寫一個(gè)你需要展示籃球的視圖。
使用控制器來讓模型和視圖交互。
看起來MVC的概念很舒服,框架的很規(guī)范,但是代碼量多了之后,就會(huì)顯得整個(gè)項(xiàng)目很臃腫,一點(diǎn)都不靈活。
作者有幸維護(hù)過一個(gè)稱為“屎山”的angular1.x項(xiàng)目,因?yàn)榻?jīng)過上百次(大概有)的需求迭代后,每個(gè)controller的代碼超過2000行,每次修bug和寫新需求,都需要維護(hù)很多方方面面的東西。
然后我們來了解下MVVM。
<input v-model="ball.basketball" /> let vm = new Vue({ data: { ball: { baskertball: '蔡徐坤就是我' } } })
M:Model 模型
V:View 視圖
VM: ViewModel 視圖模型
其實(shí)看代碼就理解了,vm其實(shí)就是vue對(duì)象。它的功能就是綁定到view上,Model里的籃球不管更新,還是做其他操作,都會(huì)通過vm來通知派發(fā)至view。
這樣做的好處呢,第一點(diǎn),一個(gè)業(yè)務(wù)邏輯你就不用寫很多遍。類似一個(gè)shopcart的功能,你把它的封裝成一個(gè)組件(ViewModel)在很多地方都可以直接引入調(diào)用。
ps:vue和React兩者的區(qū)別和共同點(diǎn)
兩者的本質(zhì)區(qū)別
1.vue本質(zhì)是MVVM框架,是由MVC發(fā)展而來。
2.React本質(zhì)是前端組件化框架,是由后端組件化發(fā)展而來。
模板的區(qū)別
1.vue使用模板--(最初由angular提出)
<div> <h2 v-if="ok">Yes</h2> <h2 v-else>No</h2> </div>
2.React使用JSX模板,現(xiàn)在已經(jīng)趨向標(biāo)準(zhǔn)化,完全可以獨(dú)立出來使用。
<div> {ok?<h2>Yes</h2>:<h2>No</h2>} </div>
從學(xué)習(xí)成本來說:JSX模板更簡(jiǎn)單,只需要知道{ }里是js語法,vue模板v-if,v-else指令需要學(xué)習(xí)。
從模板邏輯分離角度考慮:JSX模板和JS邏輯混在一起,沒有分開,容易造成混亂。
3.組件化的區(qū)別
React本身就是組件化,沒有組件化就不是React
vue也支持組件化,不過是在MVVM上的擴(kuò)展
4.兩者的共同點(diǎn)
都支持組件化
都是數(shù)據(jù)驅(qū)動(dòng)視圖
關(guān)于面試題:react和vue有什么不同就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。