vue核心面試題代碼分析

本篇內(nèi)容主要講解“vue核心面試題代碼分析”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“vue核心面試題代碼分析”吧!

1-為什么要在列表中綁定key，有什么作用

    組件在升級階段會對兩次vnode做比較，以確定走patchVnode還是create-updateParentPlaceholder-destory過程

    節(jié)點(diǎn)比照的條件之一就是key值能否等價(jià)

    這意味著，在不帶key值的情況下(即兩次均為undefined)，vue有肯定概率(如list列表)會將兩次vnode判斷為sameVnode走patchVnode復(fù)用dom節(jié)點(diǎn)

    那么，假設(shè)當(dāng)前的需求是選項(xiàng)卡形式，每一個(gè)選項(xiàng)卡下都有一個(gè)list列表，我們在tab1下的列表1通過點(diǎn)擊綁定了class使其高亮，那么入選項(xiàng)卡切換到tab2后，列表1依然是高亮狀態(tài)

2-聊聊vue的雙向數(shù)據(jù)綁定

    所謂雙向綁定，即數(shù)據(jù)驅(qū)動視圖升級，同時(shí)視圖升級又能change到數(shù)據(jù)變化

    數(shù)據(jù)——>視圖

    vue的組件創(chuàng)立會經(jīng)過init過程，這將執(zhí)行initstate函數(shù)對data和props做一次解決，它將遍歷data的key執(zhí)行observe，這是一次遞歸defineReactive的過程。即對每一個(gè)key通過Object.defineProperties設(shè)置阻攔，在get時(shí)向dep收集watcher，在set時(shí)通過dep notify到watcher執(zhí)行render update

    視圖——數(shù)據(jù)

    這體現(xiàn)在v-model指令中，我們在input、textarea中輸入的文本能驅(qū)動數(shù)據(jù)的升級。這是由于vue在模板編譯階段將v-model解析成events+props掛載到ast節(jié)點(diǎn)上，在patch過程中將會調(diào)用updateListeners通過addeventListeners向input增加input事件，當(dāng)input觸發(fā)時(shí)將調(diào)用事件升級props對應(yīng)的值，以達(dá)到視圖升級的目的

3-聊聊vuex和redux的異同點(diǎn)

    兩者都是響應(yīng)式編程的狀態(tài)管理方案，都很好的處理了嵌套組件的數(shù)據(jù)傳遞問題，也都是在全局定義store，通過dispatch向reducer派發(fā)action以升級store。相比較redux來說，vuex提供了直接連接reducer的方案，即commit

4-在vue中，子組件為何不可以修改父組件傳遞的props，假如修改了，vue是如何監(jiān)控到并報(bào)警告的？

    組件在init過程中會執(zhí)行initstate函數(shù)，這包括了對props的解決

        可以看到，vue通過重寫Object.properties.set方法，當(dāng)嘗試對props修改時(shí)發(fā)出警告。這么做是為了保證數(shù)據(jù)的單項(xiàng)流，避免出錯

5-為什么vue中的mutations中不能有異步操作

    由于異步操作是有反作用的，它的固定輸入不會有固定產(chǎn)出，這將使得程序狀態(tài)變得不可預(yù)測

6-vue2.x中的Object.definedProperty為什么會在vue3中被Proxy替代

    Object.definedProperty只能劫持對象的屬性，而對于某一個(gè)屬性的嵌套則無法劫持，但是Proxy可以，另外就是Proxy提供的可選擇api更豐富

7-Vue組件生命周期

    一個(gè)組件的創(chuàng)立，要執(zhí)行init-mount-reder-patch流程。在init過程中，首先通過callhook調(diào)用beforeCreate，接著才是initState，這意味著beforeCreate時(shí)組件的狀態(tài)是不可用的，但是可以向vuex或者vue-router那樣通過Vue.mixin混入少量插件能力，由于此時(shí)的組件尚是"干凈的"，避免了對組件造成可能性的干擾；同樣的，因?yàn)閏reated是在initState之后，故此時(shí)的狀態(tài)是可用的，因而我們可以在此向后端發(fā)起請求獲取數(shù)據(jù)并綁定給data.key;在mount過程中將首先執(zhí)行beforeMount，此時(shí)的render函數(shù)以及被編譯但尚未執(zhí)行，故無法進(jìn)行dom操作；在new Watcher的過程中將會執(zhí)行到render和update，走patch流程，故mounted時(shí)，dom已被創(chuàng)立，因而可以通過ref指令增加dom引用；當(dāng)我們通過點(diǎn)擊事件觸發(fā)data升級時(shí)，將會由dep通知到watcher執(zhí)行run走render update，此時(shí)將會執(zhí)行beforeUpdate，因?yàn)榇藭r(shí)的dom還未升級，因而我們可以copy一份舊的dom以嘗試做一次回退操作；最后當(dāng)組件卸載時(shí)將會觸發(fā)beforeDestory和destoryed，這將遞歸銷毀組件。因?yàn)関ue的模板解析只會對template中的事件進(jìn)行解決，因而我們通過ref操作dom增加的事件需要手動進(jìn)行銷毀

    最后是與keep-alive相關(guān)的activited和deactivited，標(biāo)識組件的激活和凍結(jié)狀態(tài)

8-vue在v-for時(shí)給每個(gè)元素綁定事件需要使用事件代理商嗎

    不需要！

    vue對dom的事件監(jiān)聽是通過dom.addEventListener實(shí)現(xiàn)的，對組件的事件解決是通過事件總線完成的

9-vue是如何對數(shù)組做響應(yīng)式解決的？為什么通過下標(biāo)的方式不行（假設(shè)數(shù)組為[1,2,3]）

    vue會遍歷data的每一個(gè)key調(diào)用observe，當(dāng)為數(shù)組時(shí)，實(shí)例化observe

  即調(diào)用

    可以看到這會進(jìn)入新一輪的observe

    對于我們的數(shù)組[1,2,3,4]而言，每一個(gè)key是基本類型，因而vue直接return，并未對數(shù)組的每一個(gè)key做響應(yīng)式解決

    那么數(shù)組的響應(yīng)式又是如何做到的呢，在observe實(shí)例化過程中，針對數(shù)組調(diào)用了protoAugment或者copyAugment方法，這將我們數(shù)組的原型鏈指向了arrayMethods對象，該對象通過methodsToPatch進(jìn)行了重寫

    因而，當(dāng)我們對數(shù)組執(zhí)行push/splice操作時(shí)能觸發(fā)升級

10-為什么data應(yīng)該是一個(gè)函數(shù)

    在init過程中有對data做解決，當(dāng)為函數(shù)時(shí)會執(zhí)行g(shù)etData通過call語法將this指向當(dāng)前實(shí)例，它將返回一個(gè)獨(dú)一無二的引用類型

    當(dāng)組件中存在子組件時(shí)，在render過程中將會通過Vue.extend構(gòu)建子組件構(gòu)造器，在這一過程中將會對我們的配置項(xiàng)進(jìn)行合并，假如data不是一個(gè)函數(shù)，vue會提醒警告

    這是由于，當(dāng)組件被作為公共組件使用時(shí)，對象形式的data會被共享，這意味著，在a處的修改會影響b處的展現(xiàn)

11-nextTick的實(shí)現(xiàn)

    當(dāng)組件升級時(shí)會通過dep.notify到watcher的update，這將watcher push進(jìn)隊(duì)列

    并手動調(diào)用nextTick，傳入flushSchedulerQueue

    而這實(shí)際上是利用了異步api，將我們的回調(diào)隊(duì)列延后到主線之后執(zhí)行

12-computed是如何實(shí)現(xiàn)的

    computed watcher會對依賴的變化做判斷，只有依賴變化時(shí)才會重新計(jì)算。我們知道當(dāng)data中的數(shù)據(jù)被修改時(shí)會觸發(fā)watcher的update，這將會把dirty置為true

    那么當(dāng)在render過程中訪問到computed.key時(shí)將會觸發(fā)computedGetter，這將觸發(fā)computed重新求值

    并在計(jì)算后重新置為false

到此，相信大家對“vue核心面試題代碼分析”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！