這年頭，程序員面試都講究坐姿，姿勢不對，努力白費。

參照下圖，請同學們對號入座。

回想一下，自己平時面試的坐姿，你在面試官眼里，大概是什么形象，可能是工程師，也可能是鍵盤俠，或者找麻煩的。

當然了，想拿15K+的高薪，發(fā)量也是面試官考核的一個因素。

其實，這些都是次要，如何證明自身能力才是關(guān)鍵。

接下來，各位買好票趕緊上車，目的地太原，土哥要開始焊車門了，中途誰都不許下車。

01.粉絲來信

前段時間，有小伙伴在后臺私信我，說自己最近在面試前端崗位，有家心儀公司在用Vue技術(shù)棧，問我如何在Vue面試環(huán)節(jié)，證明自己值月薪15K？

我想結(jié)合我最近的親身經(jīng)歷，聊聊這個話題。

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

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

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

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

02.環(huán)環(huán)相扣的面試

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

比較唬人的開場白，你不妨先照著這個結(jié)構(gòu)圖大概說一下，以便向面試官展示你對vue生態(tài)的全局觀，然后再娓娓道來。

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

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

你可以這么向面試官回答，vuex是vue生態(tài)系統(tǒng)中的狀態(tài)管理。在main.js引入store，注入，新建一個目錄store，….. export 等，常用的場景有：單頁應(yīng)用中，組件之間的狀態(tài)，音樂播放、登錄狀態(tài)、加入購物車等等。

還有，既然已經(jīng)是前后端分離了，那你總該知道什么是RESTful API，然后怎么使用？對吧，否則你該怎么面對項目中的前后端聯(lián)調(diào)呢。首先，RESTful是一個api的標準，無狀態(tài)請求。請求的路由地址是固定的，如果是tp5則先路由配置中把資源路由配置好。標準方法有：.get、.post、 .put、.delete。當你回答出這些問題之后，面試官對你的好感也在慢慢上升。

03.漸入佳境的博弈

當然，這些都問過之后，還有一個老掉牙的vue面試題，“請詳細說下你對vue生命周期的理解”，這個問題很俗氣，卻又很經(jīng)典。網(wǎng)上有很多關(guān)于vue生命周期的文章，但是數(shù)量太多，參差不齊。這里閏土給大家提供一個簡短精干的回答，幾句話便能解釋清楚，而且條理清晰。

vue生命周期總共分為8個階段創(chuàng)建前/后，載入前/后，更新前/后，銷毀前/后。創(chuàng)建前/后：在beforeCreated階段，vue實例的掛載元el還沒有。

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

更新前/后：當data變化時，會觸發(fā)beforeUpdate和updated方法。

銷毀前/后：在執(zhí)行destroy方法后，對data的改變不會再觸發(fā)周期函數(shù)，說明此時vue實例已經(jīng)解除了事件監(jiān)聽以及和dom的綁定，但是dom結(jié)構(gòu)依然存在。

說完life cycle，我們再來聊一個更加經(jīng)典的問題，“談?wù)勀銓ue的雙向數(shù)據(jù)綁定原理的理解”。可能你在網(wǎng)上看過了很多款答案，或簡單或詳細，但很少有一款觸及原理/源碼深處的答案，請跟著閏土來看看這個問題該如何有深度的進行闡述？

vue.js 是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。

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

第二步：compile解析模板指令，將模板中的變量替換成數(shù)據(jù)，然后初始化渲染頁面視圖，并將每個指令對應(yīng)的節(jié)點綁定更新函數(shù)，添加監(jiān)聽數(shù)據(jù)的訂閱者，一旦數(shù)據(jù)有變動，收到通知，更新視圖

第三步：Watcher訂閱者是Observer和Compile之間通信的橋梁，主要做的事情是:

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

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

3、待屬性變動dep.notice()通知時，能調(diào)用自身的update()方法，并觸發(fā)Compile中綁定的回調(diào)，則功成身退。

第四步：MVVM作為數(shù)據(jù)綁定的入口，整合Observer、Compile和Watcher三者，通過Observer來監(jiān)聽自己的model數(shù)據(jù)變化，通過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通信橋梁，達到數(shù)據(jù)變化 -> 視圖更新；視圖交互變化(input) -> 數(shù)據(jù)model變更的雙向綁定效果。

當你和面試官聊到這個階段，已經(jīng)是漸入佳境，引人入勝，面試官可能會再拋出一個問題來探探你的上限，比如問“聊聊你對Vue.js的template編譯的理解”。如果你能很好地回答這個問題，基本上vue面試環(huán)節(jié)，你就順利通過了。

接下來該劃重點了：

簡而言之，就是先轉(zhuǎn)化成AST樹，再得到的render函數(shù)返回VNode(Vue的虛擬DOM節(jié)點)

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

然后，AST會經(jīng)過generate(將AST語法樹轉(zhuǎn)化成render funtion字符串的過程)得到render函數(shù)，render的返回值是VNode，VNode是Vue的虛擬DOM節(jié)點，里面有(標簽名、子節(jié)點、文本等等)

基本上到這兒，Vue面試環(huán)節(jié)就結(jié)束了。當然，你還可以挑戰(zhàn)一下自己，例如：event & v-model: 事件和v-model的實現(xiàn)原理

slot & keep-alive: 內(nèi)置組件的實現(xiàn)原理

transition: 過渡的實現(xiàn)原理

vue-router: 官方路由的實現(xiàn)原理

vuex: 官方狀態(tài)管理的實現(xiàn)原理

04.最后總結(jié)

想要對vue原理有更深入的理解，看源碼是一條不錯的道路。當然，源碼誰都能看，看不看得懂就是另外一回事兒了，你必須有一定的技術(shù)功底，此路方可行得通。如果此時有高人指路，帶你入門，幫你全方位解析，一定會事半功倍。

假如你通過閱讀vue源碼，掌握了對Vue.js的實現(xiàn)原理，對vue生態(tài)系統(tǒng)有了充分的認識，那你會在vue面試環(huán)節(jié)游刃有余，達到晉級阿里P6+的技術(shù)功底，從而提高個人競爭力，面試加分更容易拿offer。在日常的工作當中，也能提高工作效率，開發(fā)技能如虎添翼。

總之一句話，內(nèi)功修煉，個人技術(shù)能力提升，這才是我們前端工程師的終極目標。

推薦閱讀

作者：碼農(nóng)土哥

來源：慕課網(wǎng)

本文原創(chuàng)發(fā)布于慕課網(wǎng) ，轉(zhuǎn)載請注明出處，謝謝合作

總結(jié)

以上是生活随笔為你收集整理的vue插槽面试题_关于前端Vue框架的面试题，面试官可能会问到哪些。？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。