面經(jīng)分享：如何在vue面試環(huán)節(jié)屋讶，展示你晉級(jí)阿里P6+的技術(shù)功底？
前言
一年一度緊張刺激的高考開始了须教，與此同時(shí)皿渗，我也沒(méi)閑著斩芭，奔走在各大公司的前端面試環(huán)節(jié)，不斷積累著經(jīng)驗(yàn)乐疆，一路升級(jí)打怪划乖。
最近兩年，太原作為一個(gè)準(zhǔn)二線城市挤土，各大互聯(lián)網(wǎng)公司的技術(shù)棧也在升級(jí)換代琴庵，假如你在太原面試前端崗位，而你的技術(shù)庫(kù)里若只有jQuery和Bootstrap這兩門冷兵器仰美，不好意思迷殿，相信你很快就找不到像樣兒的前端工作了。
因?yàn)楝F(xiàn)在太原的前端招聘市場(chǎng)咖杂，已然發(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í)代但凡面試必問(wèn)jQuery的架勢(shì)。
所以模蜡，太原未來(lái)幾年的技術(shù)發(fā)展趨勢(shì)漠趁，必然是MVVM前后端分離的時(shí)代。
好的忍疾，以上分析了這么多闯传，接下來(lái)就廢話少說(shuō)，直接進(jìn)入今天的主題卤妒，如題說(shuō)：如何在vue面試環(huán)節(jié)甥绿，展示你晉級(jí)阿里P6+的技術(shù)功底？
環(huán)環(huán)相扣的面試
提起vue面試環(huán)節(jié)则披，你不得不提vue的生態(tài)共缕，它的全家桶，像什么vue-router士复、vuex图谷、vue ssr等翩活。但是看一個(gè)前端er對(duì)vue的研究深度，不能僅僅停留在表面便贵，更要深入它的原理背后菠镇，探究它的源碼。
<figure style="display: block; margin: 22px auto; text-align: center;">
<figcaption style="display: block; text-align: center; font-size: 1rem; line-height: 1.6; color: rgb(144, 144, 144); margin-top: 2px;"></figcaption>
</figure>
比較唬人的開場(chǎng)白承璃，你不妨先照著這個(gè)結(jié)構(gòu)圖大概說(shuō)一下利耍，以便向面試官展示你對(duì)vue生態(tài)的全局觀，然后再娓娓道來(lái)绸硕。
最起碼的堂竟，先從簡(jiǎn)單的聊起，請(qǐng)說(shuō)出vue.cli項(xiàng)目中src目錄每個(gè)文件夾和文件的用途玻佩，這個(gè)你是必須也是一定要知道的出嘹。比如說(shuō)，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)來(lái)了晶府！首先你得知道vuex是什么桂躏？怎么使用？哪種功能場(chǎng)景使用它川陆？如果你不懂這個(gè)剂习，面試官對(duì)你的印象分會(huì)直線下降。
你可以這么向面試官回答较沪，vuex是vue生態(tài)系統(tǒng)中的狀態(tài)管理鳞绕。在main.js引入store，注入尸曼，新建一個(gè)目錄store猾昆，….. export 等，常用的場(chǎng)景有：?jiǎn)雾?yè)應(yīng)用中骡苞，組件之間的狀態(tài)垂蜗，音樂(lè)播放楷扬、登錄狀態(tài)、加入購(gòu)物車等等贴见。
還有烘苹，既然已經(jīng)是前后端分離了，那你總該知道什么是RESTful API片部，然后怎么使用镣衡？對(duì)吧，否則你該怎么面對(duì)項(xiàng)目中的前后端聯(lián)調(diào)呢档悠。首先廊鸥，RESTful是一個(gè)api的標(biāo)準(zhǔn)，無(wú)狀態(tài)請(qǐng)求辖所。請(qǐng)求的路由地址是固定的惰说，如果是tp5則先路由配置中把資源路由配置好。標(biāo)準(zhǔn)方法有：.get缘回、.post吆视、 .put、.delete酥宴。當(dāng)你回答出這些問(wèn)題之后啦吧，面試官對(duì)你的好感也在慢慢上升。
漸入佳境的博弈
當(dāng)然拙寡，這些都問(wèn)過(guò)之后授滓，還有一個(gè)老掉牙的vue面試題，“請(qǐng)?jiān)敿?xì)說(shuō)下你對(duì)vue生命周期的理解”肆糕，這個(gè)問(wèn)題很俗氣般堆，卻又很經(jīng)典。網(wǎng)上有很多關(guān)于vue生命周期的文章擎宝，但是數(shù)量太多郁妈，參差不齊浑玛。這里閏土給大家提供一個(gè)簡(jiǎn)短精干的回答绍申，幾句話便能解釋清楚，而且條理清晰顾彰。
vue生命周期總共分為8個(gè)階段創(chuàng)建前/后极阅，載入前/后，更新前/后涨享，銷毀前/后筋搏。
創(chuàng)建前/后： 在beforeCreated階段，vue實(shí)例的掛載元素
el還沒(méi)有厕隧。
載入前/后：在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方法后橄维，對(duì)data的改變不會(huì)再觸發(fā)周期函數(shù)尺铣，說(shuō)明此時(shí)vue實(shí)例已經(jīng)解除了事件監(jiān)聽以及和dom的綁定，但是dom結(jié)構(gòu)依然存在争舞。
說(shuō)完life cycle凛忿，我們?cè)賮?lái)聊一個(gè)更加經(jīng)典的問(wèn)題，“談?wù)勀銓?duì)vue的雙向數(shù)據(jù)綁定原理的理解”兑障≈斗牵可能你在網(wǎng)上看過(guò)了很多款答案，或簡(jiǎn)單或詳細(xì)流译，但很少有一款觸及原理/源碼深處的答案逞怨，請(qǐng)跟著閏土來(lái)看看這個(gè)問(wèn)題該如何有深度的進(jìn)行闡述？
vue.js 是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式福澡，通過(guò)Object.defineProperty()來(lái)劫持各個(gè)屬性的setter叠赦，getter，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者革砸，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)除秀。
具體步驟：
第一步：需要observe的數(shù)據(jù)對(duì)象進(jìn)行遞歸遍歷，包括子屬性對(duì)象的屬性算利，都加上 setter和getter册踩。這樣的話，給這個(gè)對(duì)象的某個(gè)值賦值效拭，就會(huì)觸發(fā)setter暂吉，那么就能監(jiān)聽到了數(shù)據(jù)變化
第二步：compile解析模板指令，將模板中的變量替換成數(shù)據(jù)缎患，然后初始化渲染頁(yè)面視圖慕的，并將每個(gè)指令對(duì)應(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三者弟头，通過(guò)Observer來(lái)監(jiān)聽自己的model數(shù)據(jù)變化吩抓，通過(guò)Compile來(lái)解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通信橋梁赴恨，達(dá)到數(shù)據(jù)變化 -> 視圖更新疹娶；視圖交互變化(input) -> 數(shù)據(jù)model變更的雙向綁定效果。
當(dāng)你和面試官聊到這個(gè)階段伦连，已經(jīng)是漸入佳境雨饺，引人入勝，面試官可能會(huì)再拋出一個(gè)問(wèn)題來(lái)探探你的上限惑淳，比如問(wèn)“聊聊你對(duì)Vue.js的template編譯的理解”额港。如果你能很好地回答這個(gè)問(wèn)題，基本上vue面試環(huán)節(jié)歧焦，你就順利通過(guò)了移斩。
接下來(lái)該劃重點(diǎn)了：
簡(jiǎn)而言之，就是先轉(zhuǎn)化成AST樹绢馍，再得到的render函數(shù)返回VNode（Vue的虛擬DOM節(jié)點(diǎn)）
詳情步驟：
首先向瓷，通過(guò)compile編譯器把template編譯成AST語(yǔ)法樹（abstract syntax tree 即 源代碼的抽象語(yǔ)法結(jié)構(gòu)的樹狀表現(xiàn)形式），compile是createCompiler的返回值舰涌，createCompiler是用以創(chuàng)建編譯器的猖任。另外compile還負(fù)責(zé)合并option。
然后瓷耙，AST會(huì)經(jīng)過(guò)generate（將AST語(yǔ)法樹轉(zhuǎn)化成render funtion字符串的過(guò)程）得到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: 過(guò)渡的實(shí)現(xiàn)原理
vue-router: 官方路由的實(shí)現(xiàn)原理
vuex: 官方狀態(tài)管理的實(shí)現(xiàn)原理
寫在后面
想要對(duì)vue原理有更深入的理解巢钓，看源碼是一條不錯(cuò)的道路。當(dāng)然疗垛，源碼誰(shuí)都能看症汹，看不看得懂就是另外一回事兒了，你必須有一定的技術(shù)功底贷腕，此路方可行得通背镇。如果此時(shí)有高人指路，帶你入門泽裳，幫你全方位解析瞒斩，一定會(huì)事半功倍。正好滴滴前端大神黃軼在慕課網(wǎng)剛剛錄制好一門實(shí)戰(zhàn)課程《Vue.js源碼全方位深入解析》涮总，值得推薦胸囱。
假如你通過(guò)閱讀vue源碼，掌握了對(duì)Vue.js的實(shí)現(xiàn)原理瀑梗，對(duì)vue生態(tài)系統(tǒng)有了充分的認(rèn)識(shí)烹笔，那你會(huì)在vue面試環(huán)節(jié)游刃有余，達(dá)到晉級(jí)阿里P6+的技術(shù)功底抛丽，從而提高個(gè)人競(jìng)爭(zhēng)力谤职，面試加分更容易拿offer。在日常的工作當(dāng)中亿鲜，也能提高工作效率柬帕，開發(fā)技能如虎添翼。
