這年頭，程序員面試都講究坐姿，姿勢(shì)不對(duì)，努力白費(fèi)。

參照下圖，請(qǐng)同學(xué)們對(duì)號(hào)入座。

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

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

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

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

01.粉絲來信

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

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

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

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

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

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

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

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

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

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

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

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

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

03.漸入佳境的博弈

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

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

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

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

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

說完life cycle，我們?cè)賮砹囊粋€(gè)更加經(jīng)典的問題，“談?wù)勀銓?duì)vue的雙向數(shù)據(jù)綁定原理的理解”?？赡苣阍诰W(wǎng)上看過了很多款答案，或簡(jiǎn)單或詳細(xì)，但很少有一款觸及原理/源碼深處的答案，請(qǐng)跟著閏土來看看這個(gè)問題該如何有深度的進(jìn)行闡述？

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

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

第二步：compile解析模板指令，將模板中的變量替換成數(shù)據(jù)，然后初始化渲染頁面視圖，并將每個(gè)指令對(duì)應(yīng)的節(jié)點(diǎn)綁定更新函數(shù)，添加監(jiān)聽數(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三者，通過Observer來監(jiān)聽自己的model數(shù)據(jù)變化，通過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通信橋梁，達(dá)到數(shù)據(jù)變化 -> 視圖更新；視圖交互變化(input) -> 數(shù)據(jù)model變更的雙向綁定效果。

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

接下來該劃重點(diǎn)了：

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

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

然后，AST會(huì)經(jīng)過generate(將AST語法樹轉(zhuǎn)化成render funtion字符串的過程)得到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: 過渡的實(shí)現(xiàn)原理

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

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

04.最后總結(jié)

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

假如你通過閱讀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)中，也能提高工作效率，開發(fā)技能如虎添翼。

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

推薦閱讀

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

來源：慕課網(wǎng)

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

總結(jié)

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

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