太原面經分享：如何在vue面試環節，展現你晉級阿里P6+的技術功底？

前言

一年一度緊張刺激的高考開始了，與此同時，我也沒閒着，奔走在各大公司的前端面試環節，不斷積累着經驗，一路升級打怪。

最近兩年，太原做爲一個準二線城市，各大互聯網公司的技術棧也在升級換代，假如你在太原面試前端崗位，而你的技術庫裏若只有jQuery和Bootstrap這兩門冷兵器，很差意思，相信你很快就找不到像樣兒的前端工做了。

由於如今太原的前端招聘市場，已然發生了變化，城市在不斷地向二線靠攏，技術棧也在不斷地向一線城市看齊（雖然薪資水平還在三線城市停留）。僅僅是我知道的一些公司項目裏面，已經悄然的用上了vue、react、react native、webpack、小程序、node、hybrid app等等熱門的前端技術/框架。

並且在前端面試環節，說起vue框架的次數已經不亞於當年刀耕火種時代但凡面試必問jQuery的架勢。

因此，太原將來幾年的技術發展趨勢，必然是MVVM先後端分離的時代。

好的，以上分析了這麼多，接下來就廢話少說，直接進入今天的主題，如題說：如何在vue面試環節，展現你晉級阿里P6+的技術功底？

環環相扣的面試

提起vue面試環節，你不得不提vue的生態，它的全家桶，像什麼vue-router、vuex、vue ssr等。可是看一個前端er對vue的研究深度，不能僅僅停留在表面，更要深刻它的原理背後，探究它的源碼。

比較唬人的開場白，你不妨先照着這個結構圖大概說一下，以便向面試官展現你對vue生態的全局觀，而後再娓娓道來。

最起碼的，先從簡單的聊起，請說出vue.cli項目中src目錄每一個文件夾和文件的用途，這個你是必須也是必定要知道的。好比說，assets文件夾是放靜態資源；components是放組件；router是定義路由相關的配置;view視圖；app.vue是一個應用主組件；main.js是入口文件等等。無論業務開發能力如何，首先項目目錄你得有個清晰的認知。

這僅僅是開胃菜，既然提到了vue的全家桶，就免不了要考察下vuex。咳咳咳，劃重點來了！首先你得知道vuex是什麼？怎麼使用？哪一種功能場景使用它？若是你不懂這個，面試官對你的印象分會直線降低。

你能夠這麼向面試官回答，vuex是vue生態系統中的狀態管理。在main.js引入store，注入，新建一個目錄store，….. export 等，經常使用的場景有：單頁應用中，組件之間的狀態，音樂播放、登陸狀態、加入購物車等等。

還有，既然已是先後端分離了，那你總該知道什麼是RESTful API，而後怎麼使用？對吧，不然你該怎麼面對項目中的先後端聯調呢。首先，RESTful是一個api的標準，無狀態請求。請求的路由地址是固定的，若是是tp5則先路由配置中把資源路由配置好。標準方法有：.get、.post、 .put、.delete。當你回答出這些問題以後，面試官對你的好感也在慢慢上升。

漸入佳境的博弈

固然，這些都問過以後，還有一個老掉牙的vue面試題，「請詳細說下你對vue生命週期的理解」，這個問題很俗氣，卻又很經典。網上有不少關於vue生命週期的文章，可是數量太多，良莠不齊。這裏閏土給你們提供一個簡短精幹的回答，幾句話便能解釋清楚，並且條理清晰。

vue生命週期總共分爲8個階段建立前/後，載入前/後，更新前/後，銷燬前/後。

建立前/後： 在beforeCreated階段，vue實例的掛載元素el尚未。

載入前/後：在beforeMount階段，vue實例的$el和data都初始化了，但仍是掛載以前爲虛擬的dom節點，data.message還未替換。在mounted階段，vue實例掛載完成，data.message成功渲染。

更新前/後：當data變化時，會觸發beforeUpdate和updated方法。

銷燬前/後：在執行destroy方法後，對data的改變不會再觸發周期函數，說明此時vue實例已經解除了事件監聽以及和dom的綁定，可是dom結構依然存在。

說完life cycle，咱們再來聊一個更加經典的問題，「談談你對vue的雙向數據綁定原理的理解」。可能你在網上看過了不少款答案，或簡單或詳細，但不多有一款觸及原理/源碼深處的答案，請跟着閏土來看看這個問題該如何有深度的進行闡述？

vue.js 是採用數據劫持結合發佈者-訂閱者模式的方式，經過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發相應的監聽回調。

具體步驟：

第一步：須要observe的數據對象進行遞歸遍歷，包括子屬性對象的屬性，都加上 setter和getter。這樣的話，給這個對象的某個值賦值，就會觸發setter，那麼就能監聽到了數據變化

第二步：compile解析模板指令，將模板中的變量替換成數據，而後初始化渲染頁面視圖，並將每一個指令對應的節點綁定更新函數，添加監聽數據的訂閱者，一旦數據有變更，收到通知，更新視圖

第三步：Watcher訂閱者是Observer和Compile之間通訊的橋樑，主要作的事情是:

一、在自身實例化時往屬性訂閱器(dep)裏面添加本身

二、自身必須有一個update()方法

三、待屬性變更dep.notice()通知時，能調用自身的update()方法，並觸發Compile中綁定的回調，則功成身退。

第四步：MVVM做爲數據綁定的入口，整合Observer、Compile和Watcher三者，經過Observer來監聽本身的model數據變化，經過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通訊橋樑，達到數據變化 -> 視圖更新；視圖交互變化(input) -> 數據model變動的雙向綁定效果。

當你和麪試官聊到這個階段，已是漸入佳境，引人入勝，面試官可能會再拋出一個問題來探探你的上限，好比問「聊聊你對Vue.js的template編譯的理解」。若是你能很好地回答這個問題，基本上vue面試環節，你就順利經過了。

接下來該劃重點了：

簡而言之，就是先轉化成AST樹，再獲得的render函數返回VNode（Vue的虛擬DOM節點）

詳情步驟：

首先，經過compile編譯器把template編譯成AST語法樹（abstract syntax tree 即 源代碼的抽象語法結構的樹狀表現形式），compile是createCompiler的返回值，createCompiler是用以建立編譯器的。另外compile還負責合併option。

而後，AST會通過generate（將AST語法樹轉化成render funtion字符串的過程）獲得render函數，render的返回值是VNode，VNode是Vue的虛擬DOM節點，裏面有（標籤名、子節點、文本等等）

基本上到這兒，Vue面試環節就結束了。固然，你還能夠挑戰一下本身，例如：

• event & v-model: 事件和v-model的實現原理

• slot & keep-alive: 內置組件的實現原理

• transition: 過渡的實現原理

• vue-router: 官方路由的實現原理

• vuex: 官方狀態管理的實現原理

寫在後面

想要對vue原理有更深刻的理解，看源碼是一條不錯的道路。固然，源碼誰都能看，看不看得懂就是另一回事兒了，你必須有必定的技術功底，此路方可行得通。若是此時有高人指路，帶你入門，幫你全方位解析，必定會事半功倍。正好滴滴前端大神黃軼在慕課網剛剛錄製好一門實戰課程《Vue.js源碼全方位深刻解析》，值得推薦。

假如你經過閱讀vue源碼，掌握了對Vue.js的實現原理，對vue生態系統有了充分的認識，那你會在vue面試環節遊刃有餘，達到晉級阿里P6+的技術功底，從而提升我的競爭力，面試加分更容易拿offer。在平常的工做當中，也能提升工做效率，開發技能如虎添翼。

總之一句話，內功修煉，我的技術能力提高，這纔是咱們前端工程師的終極目標。

文章預告：最新的面試分享文章將會第一時間更新在個人公衆號：<閏土大叔>裏面，歡迎關注~