面試中React與Vue的比對 / 面試/mvvm/virtual-dom/vue.js/react.js

1.virtual dom


用JS模擬DOM結(jié)構(gòu),DOM變化的對比西雀,放在JS層做磺送,以提高重繪性能

DOM操作昂貴,JS運行效率高谋减,要減少DOM操作

使用:snabbdom的使用

核心API:h函數(shù) h(‘標(biāo)簽名’,{屬性},[子元素]) 或者h(yuǎn)(‘標(biāo)簽名’,{屬性},’’)

patch(container,vnode) 或者 path(vnode,newvnode)

2.MVVM中jQuery與Vue區(qū)別


視圖與數(shù)據(jù)的分離牡彻,解耦(開放封閉原則)

以數(shù)據(jù)驅(qū)動視圖,只關(guān)心數(shù)據(jù)出爹,DOM操作被封裝

3.對MVVM的理解


MVC:model view controller

(數(shù)據(jù)模型->視圖->控制器->數(shù)據(jù)模型)


或者 (控制器->數(shù)據(jù)模型->視圖)


MVVM:model view viewmodel(視圖與數(shù)據(jù)之間的橋:事件綁定庄吼,數(shù)據(jù)綁定)


4.Vue三要素


響應(yīng)式:修改data屬性后,Vue立刻監(jiān)聽到

響應(yīng)式核心:用Object.defineProperty,將data的屬性代理到vm上

模板引擎:

本質(zhì):字符串严就;有邏輯总寻,v-if,v-for等梢为,可以嵌入JS變量废菱,必須用JS才能實現(xiàn),轉(zhuǎn)換成html渲染頁面抖誉,模板最終轉(zhuǎn)化成JS函數(shù)(render函數(shù):with方法)

渲染

5.Vue的流程


解析模板成render函數(shù):

with的使用殊轴,模板中所有信息都被render函數(shù)包含

模板中用到的data中的屬性,都變成JS變量袒炉,模板中的v-model v-for v-on都變成JS邏輯旁理,render函數(shù)返回vnode

響應(yīng)式開始監(jiān)聽:

Object.defineProperty將data的屬性代理到VM上,使用get監(jiān)聽是為了防止重復(fù)渲染

首次渲染我磁,顯示頁面孽文,且綁定依賴

data屬性變化驻襟,觸發(fā)render

6.react


組件化:組件封裝,組件復(fù)用

組件封裝:封裝視圖芋哭、數(shù)據(jù)沉衣、變化邏輯(數(shù)據(jù)驅(qū)動視圖變化)

組件復(fù)用:props傳遞,復(fù)用

JSX本質(zhì):JSX是語法糖减牺,需要被解析成JS才能運行豌习,JSX是獨立的標(biāo)準(zhǔn),可被其他項目使用

JSX就是模板拔疚,最終要渲染成html

需要vdom的原因:JSX要渲染成html肥隆,數(shù)據(jù)驅(qū)動視圖

7.setState過程


setState的異步:

(原因):可能一次執(zhí)行多次setState,無法規(guī)定稚失、限制用戶如何使用setState栋艳,沒必要每次setState都重新渲染,考慮性能句各,即便每次重新渲染吸占,用戶看不到中間渲染的效果,所以只要最后的效果就可

8.Vue與react


兩者本質(zhì)的區(qū)別:模板和組件化的區(qū)別

Vue本質(zhì)是MVVM框架凿宾,由MVC發(fā)展而來矾屯;

React是前端組件化框架,由后端組件化發(fā)展而來菌湃;

Vue使用模板

React使用JSX

React本身就是組件化

Vue是在MVVM上擴(kuò)展的

共同點:

都支持組件化问拘,都是數(shù)據(jù)驅(qū)動視圖

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末遍略,一起剝皮案震驚了整個濱河市惧所,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌绪杏,老刑警劉巖下愈,帶你破解...
    沈念sama閱讀 211,817評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異蕾久,居然都是意外死亡势似,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,329評論 3 385
  • 文/潘曉璐 我一進(jìn)店門僧著,熙熙樓的掌柜王于貴愁眉苦臉地迎上來履因,“玉大人,你說我怎么就攤上這事盹愚≌て” “怎么了?”我有些...
    開封第一講書人閱讀 157,354評論 0 348
  • 文/不壞的土叔 我叫張陵皆怕,是天一觀的道長毅舆。 經(jīng)常有香客問我西篓,道長,這世上最難降的妖魔是什么憋活? 我笑而不...
    開封第一講書人閱讀 56,498評論 1 284
  • 正文 為了忘掉前任岂津,我火速辦了婚禮,結(jié)果婚禮上悦即,老公的妹妹穿的比我還像新娘吮成。我一直安慰自己,他們只是感情好盐欺,可當(dāng)我...
    茶點故事閱讀 65,600評論 6 386
  • 文/花漫 我一把揭開白布赁豆。 她就那樣靜靜地躺著,像睡著了一般冗美。 火紅的嫁衣襯著肌膚如雪魔种。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,829評論 1 290
  • 那天粉洼,我揣著相機(jī)與錄音节预,去河邊找鬼。 笑死属韧,一個胖子當(dāng)著我的面吹牛安拟,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播宵喂,決...
    沈念sama閱讀 38,979評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼糠赦,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了锅棕?” 一聲冷哼從身側(cè)響起拙泽,我...
    開封第一講書人閱讀 37,722評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎裸燎,沒想到半個月后顾瞻,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,189評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡德绿,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,519評論 2 327
  • 正文 我和宋清朗相戀三年荷荤,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片移稳。...
    茶點故事閱讀 38,654評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡蕴纳,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出个粱,到底是詐尸還是另有隱情古毛,我是刑警寧澤,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布几蜻,位于F島的核電站喇潘,受9級特大地震影響体斩,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜颖低,卻給世界環(huán)境...
    茶點故事閱讀 39,940評論 3 313
  • 文/蒙蒙 一絮吵、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧忱屑,春花似錦蹬敲、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,762評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至从铲,卻和暖如春瘪校,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背名段。 一陣腳步聲響...
    開封第一講書人閱讀 31,993評論 1 266
  • 我被黑心中介騙來泰國打工阱扬, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人伸辟。 一個月前我還...
    沈念sama閱讀 46,382評論 2 360
  • 正文 我出身青樓麻惶,卻偏偏與公主長得像,于是被迫代替她去往敵國和親信夫。 傳聞我的和親對象是個殘疾皇子窃蹋,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,543評論 2 349

推薦閱讀更多精彩內(nèi)容