環環相扣的面試

提起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之間通信的橋梁，主要做的事情是:

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

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

3、待屬性變動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: 官方狀態管理的實現原理
• 轉載自https://segmentfault.com/a/1190000015224511

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