資訊專欄INFORMATION COLUMN
摘要：假如你通過閱讀源碼，掌握了對的實現原理，對生態系統有了充分的認識，那你會在面試環節游刃有余，達到晉級阿里的技術功底，從而提高個人競爭力，面試加分更容易拿。
前言
一年一度緊張刺激的高考開始了，與此同時，我也沒閑著，奔走在各大公司的前端面試環節，不斷積累著經驗，一路升級打怪。
最近兩年，太原作為一個準二線城市，各大互聯網公司的技術棧也在升級換代，假如你在太原面試前端崗位，而你的技術庫里若只有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之間通信的橋梁，主要做的事情是:
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: 官方狀態管理的實現原理
寫在后面想要對vue原理有更深入的理解，看源碼是一條不錯的道路。當然，源碼誰都能看，看不看得懂就是另外一回事兒了，你必須有一定的技術功底，此路方可行得通。如果此時有高人指路，帶你入門，幫你全方位解析，一定會事半功倍。正好滴滴前端大神黃軼在慕課網剛剛錄制好一門實戰課程《Vue.js源碼全方位深入解析》，值得推薦。
假如你通過閱讀vue源碼，掌握了對Vue.js的實現原理，對vue生態系統有了充分的認識，那你會在vue面試環節游刃有余，達到晉級阿里P6+的技術功底，從而提高個人競爭力，面試加分更容易拿offer。在日常的工作當中，也能提高工作效率，開發技能如虎添翼。
總之一句話，內功修煉，個人技術能力提升，這才是我們前端工程師的終極目標。文章預告：最新的面試分享文章將會第一時間更新在我的公眾號：<閏土大叔>里面，歡迎關注~
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/108045.html
摘要：應聘阿里是一個相對較長的流程，涉及崗位選擇簡歷投遞簡歷評估技術面試面試背景調查入職材料準備等環節。關于學歷和專業的要求目前，阿里的正式崗位對學歷的要求基本都是本科及以上，這個要求并不高，出發點是避免因學歷限制而錯過優秀的人才。 應聘阿里是一個相對較長的流程，涉及崗位選擇、簡歷投遞、簡歷評估、技術面試、HR面試、背景調查、入職材料準備等環節。其中，關于技術面試，網上有很多優秀的攻略，但普...
摘要：應聘阿里是一個相對較長的流程，涉及崗位選擇簡歷投遞簡歷評估技術面試面試背景調查入職材料準備等環節。關于學歷和專業的要求目前，阿里的正式崗位對學歷的要求基本都是本科及以上，這個要求并不高，出發點是避免因學歷限制而錯過優秀的人才。 應聘阿里是一個相對較長的流程，涉及崗位選擇、簡歷投遞、簡歷評估、技術面試、HR面試、背景調查、入職材料準備等環節。其中，關于技術面試，網上有很多優秀的攻略，但普...
摘要：獲取的對象范圍方法獲取的是最終應用在元素上的所有屬性對象即使沒有代碼，也會把默認的祖宗八代都顯示出來而只能獲取元素屬性中的樣式。因此對于一個光禿禿的元素，方法返回對象中屬性值如果有就是據我測試不同環境結果可能有差異而就是。 花了很長時間整理的前端面試資源，喜歡請大家不要吝嗇star~ 別只收藏，點個贊，點個star再走哈~ 持續更新中……，可以關注下github 項目地址 https:...
摘要：華為篇嚴格意義上來說，華為不算互聯網公司，網上的職級薪資數據也沒有對華為進行過調查報導。事實上，根據調查了解到的情況也確實如此，在華為供職年限越久，獎金越多，分紅規模越大。 BAT、頭條、華為們的最新技術職級序列是如何劃分的？各個職級的大致薪資范圍、股票都是多少？不同職級之間的晉升難度有多大，如何評審？校招、社招程序員想去大廠應該如何準備？本篇文章搜集整理了最新版數據，為你一一解答！寫...
摘要：華為篇嚴格意義上來說，華為不算互聯網公司，網上的職級薪資數據也沒有對華為進行過調查報導。事實上，根據調查了解到的情況也確實如此，在華為供職年限越久，獎金越多，分紅規模越大。 BAT、頭條、華為們的最新技術職級序列是如何劃分的？各個職級的大致薪資范圍、股票都是多少？不同職級之間的晉升難度有多大，如何評審？校招、社招程序員想去大廠應該如何準備？本篇文章搜集整理了最新版數據，為你一一解答！寫...
閱讀 2142·2023-04-25 18:49
閱讀 1849·2019-08-30 14:02
閱讀 2648·2019-08-29 17:24
閱讀 3330·2019-08-28 18:10
閱讀 2931·2019-08-28 18:03
閱讀 496·2019-08-26 12:01
閱讀 3315·2019-08-26 11:31
閱讀 1433·2019-08-26 10:29
