摘要:假如你通過閱讀源碼,掌握了對的實(shí)現(xiàn)原理,對生態(tài)系統(tǒng)有了充分的認(rèn)識(shí),那你會(huì)在面試環(huán)節(jié)游刃有余,達(dá)到晉級阿里的技術(shù)功底,從而提高個(gè)人競爭力,面試加分更容易拿。
前言
一年一度緊張刺激的高考開始了,與此同時(shí),我也沒閑著,奔走在各大公司的前端面試環(huán)節(jié),不斷積累著經(jīng)驗(yàn),一路升級打怪。
最近兩年,太原作為一個(gè)準(zhǔn)二線城市,各大互聯(lián)網(wǎng)公司的技術(shù)棧也在升級換代,假如你在太原面試前端崗位,而你的技術(shù)庫里若只有jQuery和Bootstrap這兩門冷兵器,不好意思,相信你很快就找不到像樣兒的前端工作了。
因?yàn)楝F(xiàn)在太原的前端招聘市場,已然發(fā)生了變化,城市在不斷地向二線靠攏,技術(shù)棧也在不斷地向一線城市看齊(雖然薪資水平還在三線城市停留)。僅僅是我知道的一些公司項(xiàng)目里面,已經(jīng)悄然的用上了vue、react、react native、webpack、小程序、node、hybrid app等等熱門的前端技術(shù)/框架。
而且在前端面試環(huán)節(jié),提及vue框架的次數(shù)已經(jīng)不亞于當(dāng)年刀耕火種時(shí)代但凡面試必問jQuery的架勢。
所以,太原未來幾年的技術(shù)發(fā)展趨勢,必然是MVVM前后端分離的時(shí)代。
好的,以上分析了這么多,接下來就廢話少說,直接進(jìn)入今天的主題,如題說:如何在vue面試環(huán)節(jié),展示你晉級阿里P6+的技術(shù)功底?
環(huán)環(huán)相扣的面試提起vue面試環(huán)節(jié),你不得不提vue的生態(tài),它的全家桶,像什么vue-router、vuex、vue ssr等。但是看一個(gè)前端er對vue的研究深度,不能僅僅停留在表面,更要深入它的原理背后,探究它的源碼。
比較唬人的開場白,你不妨先照著這個(gè)結(jié)構(gòu)圖大概說一下,以便向面試官展示你對vue生態(tài)的全局觀,然后再娓娓道來。
最起碼的,先從簡單的聊起,請說出vue.cli項(xiàng)目中src目錄每個(gè)文件夾和文件的用途,這個(gè)你是必須也是一定要知道的。比如說,assets文件夾是放靜態(tài)資源;components是放組件;router是定義路由相關(guān)的配置;view視圖;app.vue是一個(gè)應(yīng)用主組件;main.js是入口文件等等。不管業(yè)務(wù)開發(fā)能力如何,首先項(xiàng)目目錄你得有個(gè)清晰的認(rèn)知。
這僅僅是開胃菜,既然提到了vue的全家桶,就免不了要考察下vuex??瓤瓤?,劃重點(diǎn)來了!首先你得知道vuex是什么?怎么使用?哪種功能場景使用它?如果你不懂這個(gè),面試官對你的印象分會(huì)直線下降。
你可以這么向面試官回答,vuex是vue生態(tài)系統(tǒng)中的狀態(tài)管理。在main.js引入store,注入,新建一個(gè)目錄store,….. export 等,常用的場景有:單頁應(yīng)用中,組件之間的狀態(tài),音樂播放、登錄狀態(tài)、加入購物車等等。
還有,既然已經(jīng)是前后端分離了,那你總該知道什么是RESTful API,然后怎么使用?對吧,否則你該怎么面對項(xiàng)目中的前后端聯(lián)調(diào)呢。首先,RESTful是一個(gè)api的標(biāo)準(zhǔn),無狀態(tài)請求。請求的路由地址是固定的,如果是tp5則先路由配置中把資源路由配置好。標(biāo)準(zhǔn)方法有:.get、.post、 .put、.delete。當(dāng)你回答出這些問題之后,面試官對你的好感也在慢慢上升。
漸入佳境的博弈當(dāng)然,這些都問過之后,還有一個(gè)老掉牙的vue面試題,“請?jiān)敿?xì)說下你對vue生命周期的理解”,這個(gè)問題很俗氣,卻又很經(jīng)典。網(wǎng)上有很多關(guān)于vue生命周期的文章,但是數(shù)量太多,參差不齊。這里閏土給大家提供一個(gè)簡短精干的回答,幾句話便能解釋清楚,而且條理清晰。
vue生命周期總共分為8個(gè)階段創(chuàng)建前/后,載入前/后,更新前/后,銷毀前/后。
創(chuàng)建前/后: 在beforeCreated階段,vue實(shí)例的掛載元素el還沒有。
載入前/后:在beforeMount階段,vue實(shí)例的$el和data都初始化了,但還是掛載之前為虛擬的dom節(jié)點(diǎn),data.message還未替換。在mounted階段,vue實(shí)例掛載完成,data.message成功渲染。
更新前/后:當(dāng)data變化時(shí),會(huì)觸發(fā)beforeUpdate和updated方法。
銷毀前/后:在執(zhí)行destroy方法后,對data的改變不會(huì)再觸發(fā)周期函數(shù),說明此時(shí)vue實(shí)例已經(jīng)解除了事件監(jiān)聽以及和dom的綁定,但是dom結(jié)構(gòu)依然存在。
說完life cycle,我們再來聊一個(gè)更加經(jīng)典的問題,“談?wù)勀銓ue的雙向數(shù)據(jù)綁定原理的理解”??赡苣阍诰W(wǎng)上看過了很多款答案,或簡單或詳細(xì),但很少有一款觸及原理/源碼深處的答案,請跟著閏土來看看這個(gè)問題該如何有深度的進(jìn)行闡述?
vue.js 是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式,通過Object.defineProperty()來劫持各個(gè)屬性的setter,getter,在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者,觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。
具體步驟:
第一步:需要observe的數(shù)據(jù)對象進(jìn)行遞歸遍歷,包括子屬性對象的屬性,都加上 setter和getter。這樣的話,給這個(gè)對象的某個(gè)值賦值,就會(huì)觸發(fā)setter,那么就能監(jiān)聽到了數(shù)據(jù)變化
第二步:compile解析模板指令,將模板中的變量替換成數(shù)據(jù),然后初始化渲染頁面視圖,并將每個(gè)指令對應(yīng)的節(jié)點(diǎn)綁定更新函數(shù),添加監(jiān)聽數(shù)據(jù)的訂閱者,一旦數(shù)據(jù)有變動(dòng),收到通知,更新視圖
第三步:Watcher訂閱者是Observer和Compile之間通信的橋梁,主要做的事情是:
1、在自身實(shí)例化時(shí)往屬性訂閱器(dep)里面添加自己
2、自身必須有一個(gè)update()方法
3、待屬性變動(dòng)dep.notice()通知時(shí),能調(diào)用自身的update()方法,并觸發(fā)Compile中綁定的回調(diào),則功成身退。
第四步:MVVM作為數(shù)據(jù)綁定的入口,整合Observer、Compile和Watcher三者,通過Observer來監(jiān)聽自己的model數(shù)據(jù)變化,通過Compile來解析編譯模板指令,最終利用Watcher搭起Observer和Compile之間的通信橋梁,達(dá)到數(shù)據(jù)變化 -> 視圖更新;視圖交互變化(input) -> 數(shù)據(jù)model變更的雙向綁定效果。
當(dāng)你和面試官聊到這個(gè)階段,已經(jīng)是漸入佳境,引人入勝,面試官可能會(huì)再拋出一個(gè)問題來探探你的上限,比如問“聊聊你對Vue.js的template編譯的理解”。如果你能很好地回答這個(gè)問題,基本上vue面試環(huán)節(jié),你就順利通過了。
接下來該劃重點(diǎn)了:
簡而言之,就是先轉(zhuǎn)化成AST樹,再得到的render函數(shù)返回VNode(Vue的虛擬DOM節(jié)點(diǎn))
詳情步驟:
首先,通過compile編譯器把template編譯成AST語法樹(abstract syntax tree 即 源代碼的抽象語法結(jié)構(gòu)的樹狀表現(xiàn)形式),compile是createCompiler的返回值,createCompiler是用以創(chuàng)建編譯器的。另外compile還負(fù)責(zé)合并option。
然后,AST會(huì)經(jīng)過generate(將AST語法樹轉(zhuǎn)化成render funtion字符串的過程)得到render函數(shù),render的返回值是VNode,VNode是Vue的虛擬DOM節(jié)點(diǎn),里面有(標(biāo)簽名、子節(jié)點(diǎn)、文本等等)
基本上到這兒,Vue面試環(huán)節(jié)就結(jié)束了。當(dāng)然,你還可以挑戰(zhàn)一下自己,例如:
event & v-model: 事件和v-model的實(shí)現(xiàn)原理
slot & keep-alive: 內(nèi)置組件的實(shí)現(xiàn)原理
transition: 過渡的實(shí)現(xiàn)原理
vue-router: 官方路由的實(shí)現(xiàn)原理
vuex: 官方狀態(tài)管理的實(shí)現(xiàn)原理
寫在后面想要對vue原理有更深入的理解,看源碼是一條不錯(cuò)的道路。當(dāng)然,源碼誰都能看,看不看得懂就是另外一回事兒了,你必須有一定的技術(shù)功底,此路方可行得通。如果此時(shí)有高人指路,帶你入門,幫你全方位解析,一定會(huì)事半功倍。正好滴滴前端大神黃軼在慕課網(wǎng)剛剛錄制好一門實(shí)戰(zhàn)課程《Vue.js源碼全方位深入解析》,值得推薦。
假如你通過閱讀vue源碼,掌握了對Vue.js的實(shí)現(xiàn)原理,對vue生態(tài)系統(tǒng)有了充分的認(rèn)識(shí),那你會(huì)在vue面試環(huán)節(jié)游刃有余,達(dá)到晉級阿里P6+的技術(shù)功底,從而提高個(gè)人競爭力,面試加分更容易拿offer。在日常的工作當(dāng)中,也能提高工作效率,開發(fā)技能如虎添翼。
總之一句話,內(nèi)功修煉,個(gè)人技術(shù)能力提升,這才是我們前端工程師的終極目標(biāo)。文章預(yù)告:最新的面試分享文章將會(huì)第一時(shí)間更新在我的公眾號:<閏土大叔>里面,歡迎關(guān)注~
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://www.ezyhdfw.cn/yun/108045.html
摘要:應(yīng)聘阿里是一個(gè)相對較長的流程,涉及崗位選擇簡歷投遞簡歷評估技術(shù)面試面試背景調(diào)查入職材料準(zhǔn)備等環(huán)節(jié)。關(guān)于學(xué)歷和專業(yè)的要求目前,阿里的正式崗位對學(xué)歷的要求基本都是本科及以上,這個(gè)要求并不高,出發(fā)點(diǎn)是避免因?qū)W歷限制而錯(cuò)過優(yōu)秀的人才。 應(yīng)聘阿里是一個(gè)相對較長的流程,涉及崗位選擇、簡歷投遞、簡歷評估、技術(shù)面試、HR面試、背景調(diào)查、入職材料準(zhǔn)備等環(huán)節(jié)。其中,關(guān)于技術(shù)面試,網(wǎng)上有很多優(yōu)秀的攻略,但普...
摘要:應(yīng)聘阿里是一個(gè)相對較長的流程,涉及崗位選擇簡歷投遞簡歷評估技術(shù)面試面試背景調(diào)查入職材料準(zhǔn)備等環(huán)節(jié)。關(guān)于學(xué)歷和專業(yè)的要求目前,阿里的正式崗位對學(xué)歷的要求基本都是本科及以上,這個(gè)要求并不高,出發(fā)點(diǎn)是避免因?qū)W歷限制而錯(cuò)過優(yōu)秀的人才。 應(yīng)聘阿里是一個(gè)相對較長的流程,涉及崗位選擇、簡歷投遞、簡歷評估、技術(shù)面試、HR面試、背景調(diào)查、入職材料準(zhǔn)備等環(huán)節(jié)。其中,關(guān)于技術(shù)面試,網(wǎng)上有很多優(yōu)秀的攻略,但普...
摘要:獲取的對象范圍方法獲取的是最終應(yīng)用在元素上的所有屬性對象即使沒有代碼,也會(huì)把默認(rèn)的祖宗八代都顯示出來而只能獲取元素屬性中的樣式。因此對于一個(gè)光禿禿的元素,方法返回對象中屬性值如果有就是據(jù)我測試不同環(huán)境結(jié)果可能有差異而就是。 花了很長時(shí)間整理的前端面試資源,喜歡請大家不要吝嗇star~ 別只收藏,點(diǎn)個(gè)贊,點(diǎn)個(gè)star再走哈~ 持續(xù)更新中……,可以關(guān)注下github 項(xiàng)目地址 https:...
摘要:華為篇嚴(yán)格意義上來說,華為不算互聯(lián)網(wǎng)公司,網(wǎng)上的職級薪資數(shù)據(jù)也沒有對華為進(jìn)行過調(diào)查報(bào)導(dǎo)。事實(shí)上,根據(jù)調(diào)查了解到的情況也確實(shí)如此,在華為供職年限越久,獎(jiǎng)金越多,分紅規(guī)模越大。 BAT、頭條、華為們的最新技術(shù)職級序列是如何劃分的?各個(gè)職級的大致薪資范圍、股票都是多少?不同職級之間的晉升難度有多大,如何評審?校招、社招程序員想去大廠應(yīng)該如何準(zhǔn)備?本篇文章搜集整理了最新版數(shù)據(jù),為你一一解答!寫...
摘要:華為篇嚴(yán)格意義上來說,華為不算互聯(lián)網(wǎng)公司,網(wǎng)上的職級薪資數(shù)據(jù)也沒有對華為進(jìn)行過調(diào)查報(bào)導(dǎo)。事實(shí)上,根據(jù)調(diào)查了解到的情況也確實(shí)如此,在華為供職年限越久,獎(jiǎng)金越多,分紅規(guī)模越大。 BAT、頭條、華為們的最新技術(shù)職級序列是如何劃分的?各個(gè)職級的大致薪資范圍、股票都是多少?不同職級之間的晉升難度有多大,如何評審?校招、社招程序員想去大廠應(yīng)該如何準(zhǔn)備?本篇文章搜集整理了最新版數(shù)據(jù),為你一一解答!寫...
閱讀 2197·2023-04-25 18:49
閱讀 1902·2019-08-30 14:02
閱讀 2730·2019-08-29 17:24
閱讀 3376·2019-08-28 18:10
閱讀 2986·2019-08-28 18:03
閱讀 558·2019-08-26 12:01
閱讀 3373·2019-08-26 11:31
閱讀 1496·2019-08-26 10:29