摘要：假如你通過(guò)閱讀源碼，掌握了對(duì)的實(shí)現(xiàn)原理，對(duì)生態(tài)系統(tǒng)有了充分的認(rèn)識(shí)，那你會(huì)在面試環(huán)節(jié)游刃有余，達(dá)到晉級(jí)阿里的技術(shù)功底，從而提高個(gè)人競(jìng)爭(zhēng)力，面試加分更容易拿。

一年一度緊張刺激的高考開(kāi)始了，與此同時(shí)，我也沒(méi)閑著，奔走在各大公司的前端面試環(huán)節(jié)，不斷積累著經(jīng)驗(yàn)，一路升級(jí)打怪。

最近兩年，太原作為一個(gè)準(zhǔn)二線(xiàn)城市，各大互聯(lián)網(wǎng)公司的技術(shù)棧也在升級(jí)換代，假如你在太原面試前端崗位，而你的技術(shù)庫(kù)里若只有jQuery和Bootstrap這兩門(mén)冷兵器，不好意思，相信你很快就找不到像樣兒的前端工作了。

因?yàn)楝F(xiàn)在太原的前端招聘市場(chǎng)，已然發(fā)生了變化，城市在不斷地向二線(xiàn)靠攏，技術(shù)棧也在不斷地向一線(xiàn)城市看齊（雖然薪資水平還在三線(xiàn)城市停留）。僅僅是我知道的一些公司項(xiàng)目里面，已經(jīng)悄然的用上了vue、react、react native、webpack、小程序、node、hybrid app等等熱門(mén)的前端技術(shù)/框架。

而且在前端面試環(huán)節(jié)，提及vue框架的次數(shù)已經(jīng)不亞于當(dāng)年刀耕火種時(shí)代但凡面試必問(wèn)jQuery的架勢(shì)。

所以，太原未來(lái)幾年的技術(shù)發(fā)展趨勢(shì)，必然是MVVM前后端分離的時(shí)代。

好的，以上分析了這么多，接下來(lái)就廢話(huà)少說(shuō)，直接進(jìn)入今天的主題，如題說(shuō)：如何在vue面試環(huán)節(jié)，展示你晉級(jí)阿里P6+的技術(shù)功底？

提起vue面試環(huán)節(jié)，你不得不提vue的生態(tài)，它的全家桶，像什么vue-router、vuex、vue ssr等。但是看一個(gè)前端er對(duì)vue的研究深度，不能僅僅停留在表面，更要深入它的原理背后，探究它的源碼。

比較唬人的開(kāi)場(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ù)開(kāi)發(fā)能力如何，首先項(xiàng)目目錄你得有個(gè)清晰的認(rèn)知。

這僅僅是開(kāi)胃菜，既然提到了vue的全家桶，就免不了要考察下vuex?？瓤瓤?，劃重點(diǎn)來(lái)了！首先你得知道vuex是什么？怎么使用？哪種功能場(chǎng)景使用它？如果你不懂這個(gè)，面試官對(duì)你的印象分會(huì)直線(xiàn)下降。

你可以這么向面試官回答，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)物車(chē)等等。

還有，既然已經(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)短精干的回答，幾句話(huà)便能解釋清楚，而且條理清晰。

vue生命周期總共分為8個(gè)階段創(chuàng)建前/后，載入前/后，更新前/后，銷(xiāo)毀前/后。

創(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方法。

銷(xiāo)毀前/后：在執(zhí)行destroy方法后，對(duì)data的改變不會(huì)再觸發(fā)周期函數(shù)，說(shuō)明此時(shí)vue實(shí)例已經(jīng)解除了事件監(jiān)聽(tīng)以及和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)聽(tīng)回調(diào)。

具體步驟：

第一步：需要observe的數(shù)據(jù)對(duì)象進(jìn)行遞歸遍歷，包括子屬性對(duì)象的屬性，都加上 setter和getter。這樣的話(huà)，給這個(gè)對(duì)象的某個(gè)值賦值，就會(huì)觸發(fā)setter，那么就能監(jiān)聽(tīng)到了數(shù)據(jù)變化

第二步：compile解析模板指令，將模板中的變量替換成數(shù)據(jù)，然后初始化渲染頁(yè)面視圖，并將每個(gè)指令對(duì)應(yīng)的節(jié)點(diǎn)綁定更新函數(shù)，添加監(jiān)聽(tīng)數(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)聽(tīng)自己的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樹(shù)，再得到的render函數(shù)返回VNode（Vue的虛擬DOM節(jié)點(diǎn)）

詳情步驟：

首先，通過(guò)compile編譯器把template編譯成AST語(yǔ)法樹(shù)（abstract syntax tree 即 源代碼的抽象語(yǔ)法結(jié)構(gòu)的樹(shù)狀表現(xiàn)形式），compile是createCompiler的返回值，createCompiler是用以創(chuàng)建編譯器的。另外compile還負(fù)責(zé)合并option。

然后，AST會(huì)經(jīng)過(guò)generate（將AST語(yǔ)法樹(shù)轉(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í)有高人指路，帶你入門(mén)，幫你全方位解析，一定會(huì)事半功倍。正好滴滴前端大神黃軼在慕課網(wǎng)剛剛錄制好一門(mén)實(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)中，也能提高工作效率，開(kāi)發(fā)技能如虎添翼。

文章預(yù)告：最新的面試分享文章將會(huì)第一時(shí)間更新在我的公眾號(hào)：<閏土大叔>里面，歡迎關(guān)注~