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