自學前端拿到offer的心路歷程(熱乎的面經(jīng)附答案）
作者：前端自學驛站
https://juejin.cn/post/6844904199428243470
1. 前言
先交代下博主是在二線城市，所以也面不了什么大廠自然也就沒什么大廠面經(jīng)(就算有我也沒有這個實力)，昨天面試了一家中小型的公司，這里就不透露名字了，總共面了兩輪總結(jié)后寫下了這篇文章，我相信也是有很多和我在二線城市的小伙伴需要這些常見的面試題的，我是剛畢業(yè)出來實習，所以馬上要出去找實習的小伙伴可以看看，參考下。
2. 面試之前準備什么？
老實說，我面這家公司的時候之前沒有復(fù)習！早上第一面，下午就通知第二面了，幾乎是裸面的狀態(tài)（當然過程也非常慘）。
所以建議大家如果準備面試的話，還是需要提前復(fù)習下，做好準備，時間方面自己把握下，建議一周內(nèi)就行了，主要把寫在簡歷上的項目搞透，從項目的結(jié)構(gòu)、所用到的技術(shù)、難點、亮點都要知道，要能夠自己描述出項目中用了哪些，自己完成了哪些。
刷面經(jīng)看一看最近的面經(jīng)文，了解現(xiàn)在公司都在面什么類型的題，準備一些常見題，自己背一背。項目把你寫在簡歷上的的項目從技術(shù)架構(gòu)到源碼都要做到足夠了解，至少面試的時候不要被面試官問住了。亮點準備一些自己的亮點，因為面試的問題你不可能每個都回答上來，但是在面試的過程中一定要有亮點，不然問你的一些問題都是回答的一般般，讓面試官感覺不到你那方面比較擅長（你就會得到反饋，面試官說你還行，但是沒有過～）， 你可以準備幾個點，每個點都保證可以吹上個半小時。另外一定要了解的很深入，一定要能夠流暢的表達出來！練手先找?guī)准也惶肴サ墓荆ㄒ?guī)模差不多但離你住的地方比較遠等等原因。。）練練手，如果第一次面試就去心儀的公司面試，淘汰率會非常高。特別是實習生還沒有面試過的，建議多面幾家再去綜合考慮去哪家，我見過太多我身邊的朋友因為畢業(yè)著急找工作隨便投簡歷，面試通過了就入職了，干了一兩周就說不想去了，跑路又重新找，這樣的話其實非常得不償失，時間也花了也沒找到心儀的工作。心態(tài)最后就是你的心態(tài)了，心態(tài)很重要！！！面試不過很正常，不證明你不優(yōu)秀，只是不適合，總結(jié)面試經(jīng)驗，為下一次做準備。像我第一次面的第一家公司問的很多問題都回答不上來，boss上寫的招實習生，最后面試我的人盡問一些奇葩問題，前端不需要寫頁面，后端也不需要寫接口，最后說公司需要中級前端，我目前只能是個初級前端，不符合公司要求。我就納悶了招中級前端寫招聘實習生？？？整個面試下來10分鐘不到，到時我都快氣炸了。也有點影響后面的面試，所以一定要有個好的心態(tài)面對面試結(jié)果。
3. 還能記住的面試題
方便讀者閱讀我將面試題進行了個分類，這篇主要寫跟vue和項目相關(guān)的面試題，因為我簡歷上寫了三個項目，所以大部問題都是從項目開始切入的，有些記不住，回答的也不是太好。。。我會把網(wǎng)上的詳細文章貼出來，讓讀者能更詳細的學習。
vue相關(guān)
Vue實例的生命周期講一下, mounted階段真實DOM存在了嘛?
Vue實例從創(chuàng)建到銷毀的過程，就是生命周期。
也就是：開始創(chuàng)建->初始化數(shù)據(jù)->編譯模板->掛載dom->數(shù)據(jù)更新重新渲染虛擬 dom->最后銷毀。這一系列的過程就是vue的生命周期。所以在mounted階段真實的DOM就已經(jīng)存在了。
beforeCreate：vue實例的掛載元素el和數(shù)據(jù)對象 data都還沒有進行初始化，還是一個undefined狀態(tài)created: 此時vue實例的數(shù)據(jù)對象 data已經(jīng)有了，可以訪問里面的數(shù)據(jù)和方法，el還沒有，也沒有掛載dombeforeMount: 在這里vue實例的元素 el和數(shù)據(jù)對象都有了，只不過在掛載之前還是虛擬的dom節(jié)點mounted: vue實例已經(jīng)掛在到真實的 dom上，可以通過對dom操作來獲取dom節(jié)點beforeUpdate: 響應(yīng)式數(shù)據(jù)更新時調(diào)用，發(fā)生在虛擬 dom打補丁之前，適合在更新之前訪問現(xiàn)有的dom，比如手動移除已添加的事件監(jiān)聽器updated: 虛擬 dom重新渲染和打補丁之后調(diào)用，組成新的dom已經(jīng)更新，避免在這個鉤子函數(shù)中操作數(shù)據(jù)，防止死循環(huán)。beforeDestory: vue實例在銷毀前調(diào)用，在這里還可以使用，通過 this也能訪問到實例，可以在這里對一些不用的定時器進行清除，解綁事件。destoryed：vue實例銷毀后調(diào)用，調(diào)用后所有事件監(jiān)聽器會被移除，所有的子實例都會被銷毀。
官方圖示
Vue中的的通信方式有幾種？隔代組件的通信你用那種方式解決？
總共有7種，當時是只回答了4種
props/$emit 適用父子組件通信 ref與parent/children適用父子組件通信 EventBus(事件總線) 適用于父子、隔代、兄弟組件通信 attrs/listeners 適用于隔代組件通信 provide/inject 適用于隔代組件通信 vuex 適用于父子、隔代、兄弟組件通信 slot插槽方式
參考這篇文章
Vue中的常見指令有那些？？
v-text/v-html/v-for/v-show/v-if/v-else/v-cloak/v-bind/v-on/v-model/v-slot...
vue的指令還是得都記住的，這里是按照我的記憶方式排列的，大家可以有自己的記憶方式。
參考vue文檔
v-show和v-if有什么區(qū)別？？
v-show是css切換，v-if是完整的銷毀和重新創(chuàng)建，如果頻繁切換時用v-show，運行時較少改變用v-if
談?wù)勀銓uex的理解？
vuex是一個專門為vue.js開發(fā)的狀態(tài)管理模式，每一個vuex應(yīng)用核心就是store(倉庫)。store基本上就是一個容器，它包含著你的應(yīng)用中大部分的state(狀態(tài))
vuex的狀態(tài)存儲是響應(yīng)式的，當vue組件中store中讀取狀態(tài)時候，若store中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會相應(yīng)地得到高效更新。改變 store中的狀態(tài)的唯一途徑就是顯示commit(提交)mutation，這樣使得我們可以方便地跟蹤每一個狀態(tài)的變化。
主要有以下幾個模塊：
State: 定義了應(yīng)用狀態(tài)的數(shù)據(jù)結(jié)構(gòu)，可以在這里設(shè)置默認的初始狀態(tài) Getter: 允許組件從 Stroe中獲取數(shù)據(jù)，mapGetters輔助函數(shù)僅僅是將store中的getter映射到計算屬性。Mutation: 唯一更改 store中狀態(tài)的方法，且必須是同步函數(shù)。Action: 用于提交 muatation, 而不是直接變更狀態(tài)，可以包含任意異步操作。Module: 允許將單一的 store拆分為多個sotre且同時保存在單一的狀態(tài)樹中
vuex中 state存儲的數(shù)據(jù)如果頁面刷新此時數(shù)據(jù)還會有嗎?
當時沒想清楚就回答了有，面試官說沒有讓我回去可以試一下，其實過后我就知道是沒有了，在項目中有遇到過這個問題。。。
項目地址：高仿小米商城，github地址感興趣的朋友可以clone下來學習下，如果感覺不錯的話可以歡迎大家點個start。
在這個項目中我用到了vuex來管理用戶名和購物車數(shù)量，當時我的設(shè)想是用戶即使沒有登錄也可以訪問首頁，當用戶將商品加入購物車再讓用戶跳轉(zhuǎn)到登錄頁，所以就存在這么一個問題，當用戶登錄之后我通過vuex來存儲用戶名和購物車數(shù)量，當用戶跳轉(zhuǎn)其他頁面再回到首頁的時候此時vuex中state中的數(shù)據(jù)已經(jīng)沒有了導(dǎo)致用戶名和購物車數(shù)量都為空，當時的解決方案是在app.vue中 mounted這個鉤子通過cookie中有沒有存儲用戶的id來判斷用戶是否登錄，如果登錄重新發(fā)送請求再通過dispatch觸發(fā) action來提交mutation中的方法重新存儲用戶名和購物車數(shù)量到 state中
v-bind和v-model的區(qū)別， v-model原理知道嗎？
v-bind用來綁定數(shù)據(jù)和屬性以及表達式 v-model使用在表單中，實現(xiàn)雙向數(shù)據(jù)綁定的，在表單元素外不起使用。
v-model原理：我們在vue項目中主要使用v-model指令在表單 input、textarea、select、等表單元素上創(chuàng)建雙向數(shù)據(jù)綁定， v-model本質(zhì)上就是vue的語法糖，v-model在內(nèi)部為不同的輸入元素使用不同的屬性并拋出不同的事件：
text和textarea元素使用value屬性和input事件checkbox和radio使用checked屬性和change事件slect字段將value作為prop并將change作用事件
「舉個栗子」
<input v-model="something">
本質(zhì)上相當于這樣
<input v-bind:value="something" v-on:input="something = $event.target.value">
其實就是通過綁定一個something屬性，通過監(jiān)聽input事件，當用戶改變輸入框數(shù)據(jù)的時候，
通過事件傳遞過來的事件對象中的target找到事件源，value屬性表示事件源的值，從而實現(xiàn)雙向數(shù)據(jù)綁定的效果
其他的實現(xiàn)可以參考文章v-model源碼解析(超詳細)
MVC和MVVM有什么區(qū)別？？
「MVC」
M - Model：模型，是應(yīng)用程序中用于處理應(yīng)用程序數(shù)據(jù)邏輯的部分，通常模型對象負責在數(shù)據(jù)庫中存取數(shù)據(jù) V - View: 視圖，是應(yīng)用程序中處理數(shù)據(jù)顯示的部分，通常視圖是依據(jù)模型數(shù)據(jù)創(chuàng)建的。 C - Controller: 控制器, 是應(yīng)用程序中處理用戶交互的部分，通常控制器負責從視圖讀取數(shù)據(jù)，控制用戶輸入，并向模型發(fā)送數(shù)據(jù)。
圖示
流程
View 接受用戶交互請求 View 將請求轉(zhuǎn)交給Controller處理 Controller 操作Model進行數(shù)據(jù)更新保存 數(shù)據(jù)更新保存之后，Model會通知View更新 View 更新變化數(shù)據(jù)使用戶得到反饋
「MVVM」
M - Model，Model 代表數(shù)據(jù)模型，也可以在 Model 中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯 V - View，View 代表 UI 組件，它負責將數(shù)據(jù)模型轉(zhuǎn)化為 UI 展現(xiàn)出來 VM - ViewModel，ViewModel 監(jiān)聽模型數(shù)據(jù)的改變和控制視圖行為、處理用戶交互，簡單理解就是一個同步 View 和 Model 的對象，連接 Model 和 View
圖示
流程
View 接收用戶交互請求 View 將請求轉(zhuǎn)交給ViewModel ViewModel 操作Model數(shù)據(jù)更新 Model 更新完數(shù)據(jù)，通知ViewModel數(shù)據(jù)發(fā)生變化 ViewModel 更新View數(shù)據(jù)
「兩者的區(qū)別」
ViewModel 替換了Controller在UI層之下 ViewModel 向View暴露了它所需要的數(shù)據(jù)和指令 ViewModel 接收來自Model的數(shù)據(jù)
概括起來就是，MVVM由MVC發(fā)展而來，通過在Model之上而在View之下增加一個非視覺的組件將來自Model的數(shù)據(jù)映射到View中。
Vue中的組件data為什么必須是函數(shù)？？
因為組件是可以復(fù)用的，js里對象是引用關(guān)系，如果組件data是一個對象，那么子組件中的data屬性值會互相污染，產(chǎn)生不必要的麻煩。所以一個組件中的data必須是一個函數(shù)，因此每個實例可以維護一份被返回對象獨立的拷貝。也因為new Vue的實例是不會被復(fù)用，所以不存在以上問題。官方文檔講的很詳細，想要深入了解可以看下文檔中的解釋。
vue官方文檔
其他
前端的異常處理有做過嘛？？做過哪些？
遇到這個問題我是蒙的，說實話真本地沒想過面實習會問到我異常處理問題。我當時只講了
js中的編碼錯誤異常 http請求異常 Promise異常的處理
其實還有很多種，我連window.error來捕獲運行錯誤都沒講
如何優(yōu)雅處理前端異常？
cookie、SessionStroage、LocalStroage這三者的區(qū)別。
回答這個問題的時候我沒答好，講到最后自己都沒聽明白，之間自己還做過筆記(可見復(fù)習的重要性，做過的筆記一定要多看，不然也就沒有意義了)
存儲大小
Cookie4K, Stroage5M
存儲有效期
Cookie有有效期的限制，而Storage沒有，sessionStorage只在窗口關(guān)閉會消失 LocalStorage始終有效即使瀏覽器關(guān)閉也有，是存儲在硬盤中的。存儲位置：C:\Users\你的計算機名\AppData\Local\Google\Chrome\User Data\Default\Local Storage\leveldb
作用域不同
sessionStorage不在不同的瀏覽器窗口共享，即使是同一個頁面，LocalStorage在所有同源窗口中都是共享的，cookie也是在所以同源窗口共享。
Cookie、LocalStorage 與 SessionStorage的區(qū)別在哪里？
對于http請求有了解過嘛？常見的狀態(tài)碼都有那些？405是什么？
HTTP網(wǎng)絡(luò)狀態(tài)碼(STATUS) 根據(jù)狀態(tài)碼能夠清楚的反映出當前交互的結(jié)果及原因
200 OK 成功(最理想的狀態(tài)) 301 Moved Permanently 永久轉(zhuǎn)移（永久重定向） 302 Move temporarily 臨時轉(zhuǎn)移 304 Not Modified 設(shè)置緩存 400 Bad Request 請求參數(shù)錯誤 401 Unauthorized 無權(quán)限訪問 404 Not Found 找不到資源(最不理想的狀態(tài)) 405 Method Not Allowed 請求行中指定的請求方法不能被用于請求相應(yīng)的資源，但是該響應(yīng)必須返回一個Allow頭信息來表示出當前資源能夠接受請求方法的列表。 500 Internal Server Error 未知的服務(wù)器錯誤 503 Service Unavailable 服務(wù)器超負荷
2xx狀態(tài)碼一般是前端人員的鍋，5xx一般是后臺人員的鍋，學會看問題出在哪里很重要，對以后工作中的甩鍋有很大幫助。
瀏覽器緩存知道嗎？
瀏覽器緩存也就是HTTP緩存機制，其機制是根據(jù)HTTP報文的緩存標識進行的，緩存分為兩種：
強制緩存 協(xié)商緩存
「強制緩存」
當瀏覽器向服務(wù)器發(fā)送請求的時候，服務(wù)器會將緩存規(guī)則放入HTTP響應(yīng)的報文的HTTP頭中和請求結(jié)果一起返回給瀏覽器，控制強制緩存的字段分別是Expires和Cache-Control，其中Cache-Conctrol的優(yōu)先級比Expires高。
「協(xié)商緩存」
協(xié)商緩存就是強制緩存失效后，瀏覽器攜帶緩存標識向服務(wù)器發(fā)起請求，由服務(wù)器根據(jù)緩存標識決定是否使用緩存的過程
強制緩存優(yōu)先于協(xié)商緩存進行，若強制緩存生效則直接使用緩存，若不生效則進行協(xié)商緩存，協(xié)商緩存由服務(wù)器決定是否使用緩存，若協(xié)商緩存失效，那么代表該請求的緩存失效，重新獲取請求結(jié)果，再存入瀏覽器緩存中；生效則返回304，繼續(xù)使用緩存
瀏覽器緩存機制
原生Ajax和axios的區(qū)別，Ajax怎么發(fā)送http請求的？
原生Ajax是根據(jù) XMLHttpRequest發(fā)HTTP請求，而axios是根據(jù)Ajax進行封裝的插件，其內(nèi)部利用Promise實現(xiàn)，很好的解決的異步請求回調(diào)地獄的問題。
后者的問題其實就是問Ajax發(fā)送請求的五個步驟，這個過于基礎(chǔ)就不講了。
get請求和post請求有什么區(qū)別？？
「GET」
一般用于獲取數(shù)據(jù) 基于URL地址傳參，所以有個長度限制(一般在8KB左右)，如果超過就會被截掉 因為GET請求基于問號傳參容易被劫持，所以相對不安全。 會產(chǎn)生不可控制的緩存，POST不會
「POST」
一般用于新增數(shù)據(jù) 基于請求傳參，理論上沒有任何限制(真實項目中會自己做大小限制，防止上傳過在信息導(dǎo)致請求遲遲完不成) PSOT請求基于請求主體傳參，相對來說不好被劫持，比較安全
http和https有什么區(qū)別？？
這個問題要回答起來能回答半個小時，每個人回答的方向不一樣。
我的回答是：HTTP為超文本傳輸協(xié)議，HTTPS為安全超文本傳輸協(xié)議，后者是前者的升級，相對比較安全，通過數(shù)據(jù)加密傳輸?shù)姆绞剑踩禂?shù)比較高，HTTPS也會作為網(wǎng)站的搜索權(quán)重指標，所以HTTPS的網(wǎng)站在排名中也更有優(yōu)勢。
后端能刪除前端設(shè)置的cookie嗎？
我回答是不可以的，我也不知道是不是對的，百度了一圈也沒有答案。。。有知道的大佬可以在評論區(qū)回答下。
常見布局有幾種方式？
彈性布局(rem/em) 柵格化布局 百分比布局 浮動布局 ...
網(wǎng)上有很多種，可以自己去搜，這里就不多講了。
rem和em有區(qū)別嘛? 1em等于多少像素
rem和em單位一樣，都是一個相對單位，不同的是em是相對于元素的父元素的font-size進行計算，rem是相對于 根元素html的font-size進行計算。
1em相當于當前元素父元素的font-size
舉個栗子
<style>
.box {
font-size: 18px;
}
.box .children {
width: 2rem; // 相當于2 * 18 = 36px
}
</style>
<div class="box">
<span class="children">里面</span>
</div>
git用過吧？常見的命令有哪些？如果讓你來負責一個項目你怎么讓管理你的倉庫？
「常用命令」
# 創(chuàng)建版本庫：
- git clone
- git init
# 查看配置
git config -l // 查看全部
git conig --global -l // 查看倉庫中人員名和郵箱
git config user.name xxx // 設(shè)置
git config user.email xxx // 設(shè)置
# 修改和提交
git status
git diff // 查看變更內(nèi)容
git add .
git mv
git rm
git commmit -m
# 查看提交歷史
git log
git log <file> // 查看該文件每次提交的記錄
分支操作
git branch // 查看當前分支
git checkout -b // 添加一個新分支并切換過去
# 遠程操作
git remote -v // 查看遠程分支
git remote add <remoteURL> // 添加遠程分支
最后說了下我管理庫的方式：首先我會在gitHub上創(chuàng)建一個倉庫，為當前項目中每位開發(fā)人員取一個對應(yīng)的分支，讓其在對應(yīng)的分支開發(fā)。然后clone我這個倉庫。當隊員需要向gitHub上傳代碼時，需要先將自己的代碼同步到自己遠程倉庫對應(yīng)的分支中，再切換到要本地的主分支將自己本地開發(fā)的分支代碼進行合并，如果有沖突先在本地解決，最后再同步到遠程的主分支 復(fù)制代碼`
場景題
如果有一張很大的圖片放到線上, 顯示要很久, 你會怎么優(yōu)化?
我當時只回答了這兩點，其他的我也不知道。。。
用延遲加載技術(shù) 優(yōu)化圖片的大小
如果讓你對element-ui中的表單進行二次動態(tài)封裝，你會怎么做？
對于這種題我回答的賊差，不敢誤人子弟，這里分享一個錯的文章 組件化頁面：封裝el-form
項目中遇到過那些復(fù)雜的業(yè)務(wù)場景，怎么解決的？
這個就看個人回答了，不同的項目遇到的問題也不一樣。
封裝組件你有什么好的想法
對于這個問題我是蒙的，可能是因為我簡歷上寫了很好的組件化開發(fā)思想吧（說實話當時的回答有點打臉)，我是從代碼方面回答的。
通過vue.extend，vue.component注冊這種方式找到項目通用的模塊，指定通用部分代碼，props傳值，并且通過slot來自由定制內(nèi)容，然后創(chuàng)建vue文件。
對于這種問題網(wǎng)上也沒有好的回答，歡迎大佬在下方評論交流。
在眾多表單中都需要用到點擊查詢按鈕根據(jù)參數(shù)的不同來彈出一個查詢框，里面有個小列表,查到數(shù)據(jù)后點一行再回顯， 你怎么封裝這個組件? (就是多個頁面中需要查詢顯示數(shù)據(jù)列表)
我說下我的大概思路，首先分析需求：需要什么？
一個form表單，一個table，分頁 n個條件框，查詢按鈕、重置按鈕、其他功能按鈕。。
需要實現(xiàn)的功能
查詢 點擊分頁后查詢數(shù)據(jù) 重置 選中一行后拿到數(shù)據(jù) 其他功能的觸發(fā)
最后確定那些數(shù)據(jù)是需要外部傳入就ok了。
你覺得你這個防小米商城項目中最大的亮點是什么？？
在訂單確認頁面，使用自行封裝dialog通過slot自由定制內(nèi)容的方式來實現(xiàn)，新增、編輯、刪除收貨地址的對應(yīng)元素，用戶點擊的不同實現(xiàn)對應(yīng)功能。
最后
歡迎加我微信(winty230)，拉你進技術(shù)群，長期交流學習...
歡迎關(guān)注「前端Q」,認真學前端，做個專業(yè)的技術(shù)人...
