自學(xué)前端拿到offer的心路歷程(熱乎的面經(jīng)附答案）

1. 前言

先交代下博主是在二線城市，所以也面不了什么大廠自然也就沒什么大廠面經(jīng)(就算有我也沒有這個(gè)實(shí)力)，昨天面試了一家中小型的公司，這里就不透露名字了，總共面了兩輪總結(jié)后寫下了這篇文章，我相信也是有很多和我在二線城市的小伙伴需要這些常見的面試題的，我是剛畢業(yè)出來實(shí)習(xí)，所以馬上要出去找實(shí)習(xí)的小伙伴可以看看，參考下。

2. 面試之前準(zhǔn)備什么？

老實(shí)說，我面這家公司的時(shí)候之前沒有復(fù)習(xí)！早上第一面，下午就通知第二面了，幾乎是裸面的狀態(tài)（當(dāng)然過程也非常慘）。

所以建議大家如果準(zhǔn)備面試的話，還是需要提前復(fù)習(xí)下，做好準(zhǔn)備，時(shí)間方面自己把握下，建議一周內(nèi)就行了，主要把寫在簡(jiǎn)歷上的項(xiàng)目搞透，從項(xiàng)目的結(jié)構(gòu)、所用到的技術(shù)、難點(diǎn)、亮點(diǎn)都要知道，要能夠自己描述出項(xiàng)目中用了哪些，自己完成了哪些。

1. 刷面經(jīng) 看一看最近的面經(jīng)文，了解現(xiàn)在公司都在面什么類型的題，準(zhǔn)備一些常見題，自己背一背。
2. 項(xiàng)目 把你寫在簡(jiǎn)歷上的的項(xiàng)目從技術(shù)架構(gòu)到源碼都要做到足夠了解，至少面試的時(shí)候不要被面試官問住了。
3. 亮點(diǎn) 準(zhǔn)備一些自己的亮點(diǎn)，因?yàn)槊嬖嚨膯栴}你不可能每個(gè)都回答上來，但是在面試的過程中一定要有亮點(diǎn)，不然問你的一些問題都是回答的一般般，讓面試官感覺不到你那方面比較擅長(zhǎng)（你就會(huì)得到反饋，面試官說你還行，但是沒有過～）， 你可以準(zhǔn)備幾個(gè)點(diǎn)，每個(gè)點(diǎn)都保證可以吹上個(gè)半小時(shí)。另外一定要了解的很深入，一定要能夠流暢的表達(dá)出來！
4. 練手 先找?guī)准也惶肴サ墓荆ㄒ?guī)模差不多但離你住的地方比較遠(yuǎn)等等原因。。）練練手，如果第一次面試就去心儀的公司面試，淘汰率會(huì)非常高。特別是實(shí)習(xí)生還沒有面試過的，建議多面幾家再去綜合考慮去哪家，我見過太多我身邊的朋友因?yàn)楫厴I(yè)著急找工作隨便投簡(jiǎn)歷，面試通過了就入職了，干了一兩周就說不想去了，跑路又重新找，這樣的話其實(shí)非常得不償失，時(shí)間也花了也沒找到心儀的工作。
5. 心態(tài) 最后就是你的心態(tài)了，心態(tài)很重要！！！面試不過很正常，不證明你不優(yōu)秀，只是不適合，總結(jié)面試經(jīng)驗(yàn)，為下一次做準(zhǔn)備。像我第一次面的第一家公司問的很多問題都回答不上來，boss上寫的招實(shí)習(xí)生，最后面試我的人盡問一些奇葩問題，前端不需要寫頁面，后端也不需要寫接口，最后說公司需要中級(jí)前端，我目前只能是個(gè)初級(jí)前端，不符合公司要求。我就納悶了招中級(jí)前端寫招聘實(shí)習(xí)生？？？整個(gè)面試下來10分鐘不到，到時(shí)我都快氣炸了。也有點(diǎn)影響后面的面試，所以一定要有個(gè)好的心態(tài)面對(duì)面試結(jié)果。

3. 還能記住的面試題

方便讀者閱讀我將面試題進(jìn)行了個(gè)分類，這篇主要寫跟vue和項(xiàng)目相關(guān)的面試題，因?yàn)槲液?jiǎn)歷上寫了三個(gè)項(xiàng)目，所以大部問題都是從項(xiàng)目開始切入的，有些記不住，回答的也不是太好。。。我會(huì)把網(wǎng)上的詳細(xì)文章貼出來，讓讀者能更詳細(xì)的學(xué)習(xí)。

vue相關(guān)

1. Vue實(shí)例的生命周期講一下, mounted階段真實(shí)DOM存在了嘛?

Vue實(shí)例從創(chuàng)建到銷毀的過程，就是生命周期。

也就是：開始創(chuàng)建->初始化數(shù)據(jù)->編譯模板->掛載dom->數(shù)據(jù)更新重新渲染虛擬 dom->最后銷毀。這一系列的過程就是vue的生命周期。所以在mounted階段真實(shí)的DOM就已經(jīng)存在了。

• beforeCreate：vue實(shí)例的掛載元素el和數(shù)據(jù)對(duì)象data都還沒有進(jìn)行初始化，還是一個(gè) undefined狀態(tài)
• created: 此時(shí)vue實(shí)例的數(shù)據(jù)對(duì)象data已經(jīng)有了，可以訪問里面的數(shù)據(jù)和方法， el還沒有，也沒有掛載dom
• beforeMount: 在這里vue實(shí)例的元素el和數(shù)據(jù)對(duì)象都有了，只不過在掛載之前還是虛擬的dom節(jié)點(diǎn)
• mounted: vue實(shí)例已經(jīng)掛在到真實(shí)的dom上，可以通過對(duì) dom操作來獲取dom節(jié)點(diǎn)
• beforeUpdate: 響應(yīng)式數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬dom打補(bǔ)丁之前，適合在更新之前訪問現(xiàn)有的 dom，比如手動(dòng)移除已添加的事件監(jiān)聽器
• updated: 虛擬dom重新渲染和打補(bǔ)丁之后調(diào)用，組成新的 dom已經(jīng)更新，避免在這個(gè)鉤子函數(shù)中操作數(shù)據(jù)，防止死循環(huán)。
• beforeDestory: vue實(shí)例在銷毀前調(diào)用，在這里還可以使用，通過this也能訪問到實(shí)例，可以在這里對(duì)一些不用的定時(shí)器進(jìn)行清除，解綁事件。
• destoryed：vue實(shí)例銷毀后調(diào)用，調(diào)用后所有事件監(jiān)聽器會(huì)被移除，所有的子實(shí)例都會(huì)被銷毀。

官方圖示

2. Vue中的的通信方式有幾種？隔代組件的通信你用那種方式解決？

總共有7種，當(dāng)時(shí)是只回答了4種

• props/$emit 適用父子組件通信
• ref與parent/children適用父子組件通信
• EventBus(事件總線) 適用于父子、隔代、兄弟組件通信
• attrs/listeners 適用于隔代組件通信
• provide/inject 適用于隔代組件通信
• vuex 適用于父子、隔代、兄弟組件通信
• slot插槽方式

參考這篇文章

3. 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文檔

4. v-show和v-if有什么區(qū)別？？

v-show是css切換，v-if是完整的銷毀和重新創(chuàng)建，如果頻繁切換時(shí)用v-show，運(yùn)行時(shí)較少改變用v-if

5. 談?wù)勀銓?duì)vuex的理解？

vuex是一個(gè)專門為vue.js開發(fā)的狀態(tài)管理模式，每一個(gè)vuex應(yīng)用核心就是store(倉庫)。store基本上就是一個(gè)容器，它包含著你的應(yīng)用中大部分的state(狀態(tài))

• vuex的狀態(tài)存儲(chǔ)是響應(yīng)式的，當(dāng) vue組件中store中讀取狀態(tài)時(shí)候，若store中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會(huì)相應(yīng)地得到高效更新。
• 改變store中的狀態(tài)的唯一途徑就是顯示 commit(提交)mutation，這樣使得我們可以方便地跟蹤每一個(gè)狀態(tài)的變化。

主要有以下幾個(gè)模塊：

• State: 定義了應(yīng)用狀態(tài)的數(shù)據(jù)結(jié)構(gòu)，可以在這里設(shè)置默認(rèn)的初始狀態(tài)
• Getter: 允許組件從Stroe中獲取數(shù)據(jù)， mapGetters輔助函數(shù)僅僅是將store中的getter映射到計(jì)算屬性。
• Mutation: 唯一更改store中狀態(tài)的方法，且必須是同步函數(shù)。
• Action: 用于提交muatation, 而不是直接變更狀態(tài)，可以包含任意異步操作。
• Module: 允許將單一的store拆分為多個(gè) sotre且同時(shí)保存在單一的狀態(tài)樹中

6. vuex中state存儲(chǔ)的數(shù)據(jù)如果頁面刷新此時(shí)數(shù)據(jù)還會(huì)有嗎?

當(dāng)時(shí)沒想清楚就回答了有，面試官說沒有讓我回去可以試一下，其實(shí)過后我就知道是沒有了，在項(xiàng)目中有遇到過這個(gè)問題。。。

項(xiàng)目地址：高仿小米商城，github地址感興趣的朋友可以clone下來學(xué)習(xí)下，如果感覺不錯(cuò)的話可以歡迎大家點(diǎn)個(gè)start。

在這個(gè)項(xiàng)目中我用到了vuex來管理用戶名和購物車數(shù)量，當(dāng)時(shí)我的設(shè)想是用戶即使沒有登錄也可以訪問首頁，當(dāng)用戶將商品加入購物車再讓用戶跳轉(zhuǎn)到登錄頁，所以就存在這么一個(gè)問題，當(dāng)用戶登錄之后我通過vuex來存儲(chǔ)用戶名和購物車數(shù)量，當(dāng)用戶跳轉(zhuǎn)其他頁面再回到首頁的時(shí)候此時(shí)vuex中state中的數(shù)據(jù)已經(jīng)沒有了導(dǎo)致用戶名和購物車數(shù)量都為空，當(dāng)時(shí)的解決方案是在app.vue中 mounted這個(gè)鉤子通過cookie中有沒有存儲(chǔ)用戶的id來判斷用戶是否登錄，如果登錄重新發(fā)送請(qǐng)求再通過dispatch觸發(fā) action來提交mutation中的方法重新存儲(chǔ)用戶名和購物車數(shù)量到 state中

7. v-bind和v-model的區(qū)別， v-model原理知道嗎？

• v-bind用來綁定數(shù)據(jù)和屬性以及表達(dá)式
• v-model使用在表單中，實(shí)現(xiàn)雙向數(shù)據(jù)綁定的，在表單元素外不起使用。

v-model原理：我們?cè)趘ue項(xiàng)目中主要使用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作用事件

「舉個(gè)栗子」

<input v-model="something">
本質(zhì)上相當(dāng)于這樣
<input v-bind:value="something" v-on:input="something = $event.target.value">
其實(shí)就是通過綁定一個(gè)something屬性，通過監(jiān)聽input事件，當(dāng)用戶改變輸入框數(shù)據(jù)的時(shí)候，
通過事件傳遞過來的事件對(duì)象中的target找到事件源，value屬性表示事件源的值，從而實(shí)現(xiàn)雙向數(shù)據(jù)綁定的效果

其他的實(shí)現(xiàn)可以參考文章v-model源碼解析(超詳細(xì))

8. MVC和MVVM有什么區(qū)別？？

「MVC」

• M - Model：模型，是應(yīng)用程序中用于處理應(yīng)用程序數(shù)據(jù)邏輯的部分，通常模型對(duì)象負(fù)責(zé)在數(shù)據(jù)庫中存取數(shù)據(jù)
• V - View: 視圖，是應(yīng)用程序中處理數(shù)據(jù)顯示的部分，通常視圖是依據(jù)模型數(shù)據(jù)創(chuàng)建的。
• C - Controller: 控制器, 是應(yīng)用程序中處理用戶交互的部分，通常控制器負(fù)責(zé)從視圖讀取數(shù)據(jù)，控制用戶輸入，并向模型發(fā)送數(shù)據(jù)。

圖示

流程

• View 接受用戶交互請(qǐng)求
• View 將請(qǐng)求轉(zhuǎn)交給Controller處理
• Controller 操作Model進(jìn)行數(shù)據(jù)更新保存
• 數(shù)據(jù)更新保存之后，Model會(huì)通知View更新
• View 更新變化數(shù)據(jù)使用戶得到反饋

「MVVM」

• M - Model，Model 代表數(shù)據(jù)模型，也可以在 Model 中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯
• V - View，View 代表 UI 組件，它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化為 UI 展現(xiàn)出來
• VM - ViewModel，ViewModel 監(jiān)聽模型數(shù)據(jù)的改變和控制視圖行為、處理用戶交互，簡(jiǎn)單理解就是一個(gè)同步 View 和 Model 的對(duì)象，連接 Model 和 View

圖示

流程

• View 接收用戶交互請(qǐng)求
• View 將請(qǐng)求轉(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之下增加一個(gè)非視覺的組件將來自Model的數(shù)據(jù)映射到View中。

9. Vue中的組件data為什么必須是函數(shù)？？

因?yàn)榻M件是可以復(fù)用的，js里對(duì)象是引用關(guān)系，如果組件data是一個(gè)對(duì)象，那么子組件中的data屬性值會(huì)互相污染，產(chǎn)生不必要的麻煩。所以一個(gè)組件中的data必須是一個(gè)函數(shù)，因此每個(gè)實(shí)例可以維護(hù)一份被返回對(duì)象獨(dú)立的拷貝。也因?yàn)?code style="margin-right: 2px;margin-left: 2px;padding: 2px 4px;max-width: 100%;word-wrap: break-word;font-size: 14px;border-radius: 4px;background-color: rgba(27, 31, 35, 0.047);font-family: 'Operator Mono', Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(239, 112, 96);box-sizing: border-box !important;">new Vue的實(shí)例是不會(huì)被復(fù)用，所以不存在以上問題。官方文檔講的很詳細(xì)，想要深入了解可以看下文檔中的解釋。

vue官方文檔

其他

1. 前端的異常處理有做過嘛？？做過哪些？

遇到這個(gè)問題我是蒙的，說實(shí)話真本地沒想過面實(shí)習(xí)會(huì)問到我異常處理問題。我當(dāng)時(shí)只講了

• js中的編碼錯(cuò)誤異常
• http請(qǐng)求異常
• Promise異常的處理

其實(shí)還有很多種，我連window.error來捕獲運(yùn)行錯(cuò)誤都沒講

如何優(yōu)雅處理前端異常？

2. cookie、SessionStroage、LocalStroage這三者的區(qū)別。

回答這個(gè)問題的時(shí)候我沒答好，講到最后自己都沒聽明白，之間自己還做過筆記(可見復(fù)習(xí)的重要性，做過的筆記一定要多看，不然也就沒有意義了)

• 存儲(chǔ)大小

Cookie4K, Stroage5M

• 存儲(chǔ)有效期

Cookie有有效期的限制，而Storage沒有，sessionStorage只在窗口關(guān)閉會(huì)消失 LocalStorage始終有效即使瀏覽器關(guān)閉也有，是存儲(chǔ)在硬盤中的。存儲(chǔ)位置：C:\Users\你的計(jì)算機(jī)名\AppData\Local\Google\Chrome\User Data\Default\Local Storage\leveldb

• 作用域不同

sessionStorage不在不同的瀏覽器窗口共享，即使是同一個(gè)頁面，LocalStorage在所有同源窗口中都是共享的，cookie也是在所以同源窗口共享。

Cookie、LocalStorage 與 SessionStorage的區(qū)別在哪里？

3. 對(duì)于http請(qǐng)求有了解過嘛？常見的狀態(tài)碼都有那些？405是什么？

HTTP網(wǎng)絡(luò)狀態(tài)碼(STATUS) 根據(jù)狀態(tài)碼能夠清楚的反映出當(dāng)前交互的結(jié)果及原因

• 200 OK 成功(最理想的狀態(tài))
• 301 Moved Permanently 永久轉(zhuǎn)移（永久重定向）
• 302 Move temporarily 臨時(shí)轉(zhuǎn)移
• 304 Not Modified 設(shè)置緩存
• 400 Bad Request 請(qǐng)求參數(shù)錯(cuò)誤
• 401 Unauthorized 無權(quán)限訪問
• 404 Not Found 找不到資源(最不理想的狀態(tài))
• 405 Method Not Allowed 請(qǐng)求行中指定的請(qǐng)求方法不能被用于請(qǐng)求相應(yīng)的資源，但是該響應(yīng)必須返回一個(gè)Allow頭信息來表示出當(dāng)前資源能夠接受請(qǐng)求方法的列表。
• 500 Internal Server Error 未知的服務(wù)器錯(cuò)誤
• 503 Service Unavailable 服務(wù)器超負(fù)荷

2xx狀態(tài)碼一般是前端人員的鍋，5xx一般是后臺(tái)人員的鍋，學(xué)會(huì)看問題出在哪里很重要，對(duì)以后工作中的甩鍋有很大幫助。

4. 瀏覽器緩存知道嗎？

瀏覽器緩存也就是HTTP緩存機(jī)制，其機(jī)制是根據(jù)HTTP報(bào)文的緩存標(biāo)識(shí)進(jìn)行的，緩存分為兩種：

• 強(qiáng)制緩存
• 協(xié)商緩存

「強(qiáng)制緩存」

當(dāng)瀏覽器向服務(wù)器發(fā)送請(qǐng)求的時(shí)候，服務(wù)器會(huì)將緩存規(guī)則放入HTTP響應(yīng)的報(bào)文的HTTP頭中和請(qǐng)求結(jié)果一起返回給瀏覽器，控制強(qiáng)制緩存的字段分別是Expires和Cache-Control，其中Cache-Conctrol的優(yōu)先級(jí)比Expires高。

「協(xié)商緩存」

協(xié)商緩存就是強(qiáng)制緩存失效后，瀏覽器攜帶緩存標(biāo)識(shí)向服務(wù)器發(fā)起請(qǐng)求，由服務(wù)器根據(jù)緩存標(biāo)識(shí)決定是否使用緩存的過程

強(qiáng)制緩存優(yōu)先于協(xié)商緩存進(jìn)行，若強(qiáng)制緩存生效則直接使用緩存，若不生效則進(jìn)行協(xié)商緩存，協(xié)商緩存由服務(wù)器決定是否使用緩存，若協(xié)商緩存失效，那么代表該請(qǐng)求的緩存失效，重新獲取請(qǐng)求結(jié)果，再存入瀏覽器緩存中；生效則返回304，繼續(xù)使用緩存

瀏覽器緩存機(jī)制

5. 原生Ajax和axios的區(qū)別，Ajax怎么發(fā)送http請(qǐng)求的？

原生Ajax是根據(jù) XMLHttpRequest發(fā)HTTP請(qǐng)求，而axios是根據(jù)Ajax進(jìn)行封裝的插件，其內(nèi)部利用Promise實(shí)現(xiàn)，很好的解決的異步請(qǐng)求回調(diào)地獄的問題。

后者的問題其實(shí)就是問Ajax發(fā)送請(qǐng)求的五個(gè)步驟，這個(gè)過于基礎(chǔ)就不講了。

6. get請(qǐng)求和post請(qǐng)求有什么區(qū)別？？

「GET」

• 一般用于獲取數(shù)據(jù)
• 基于URL地址傳參，所以有個(gè)長(zhǎng)度限制(一般在8KB左右)，如果超過就會(huì)被截掉
• 因?yàn)镚ET請(qǐng)求基于問號(hào)傳參容易被劫持，所以相對(duì)不安全。
• 會(huì)產(chǎn)生不可控制的緩存，POST不會(huì)

「POST」

• 一般用于新增數(shù)據(jù)
• 基于請(qǐng)求傳參，理論上沒有任何限制(真實(shí)項(xiàng)目中會(huì)自己做大小限制，防止上傳過在信息導(dǎo)致請(qǐng)求遲遲完不成)
• PSOT請(qǐng)求基于請(qǐng)求主體傳參，相對(duì)來說不好被劫持，比較安全

7. http和https有什么區(qū)別？？

這個(gè)問題要回答起來能回答半個(gè)小時(shí)，每個(gè)人回答的方向不一樣。

我的回答是：HTTP為超文本傳輸協(xié)議，HTTPS為安全超文本傳輸協(xié)議，后者是前者的升級(jí)，相對(duì)比較安全，通過數(shù)據(jù)加密傳輸?shù)姆绞剑踩禂?shù)比較高，HTTPS也會(huì)作為網(wǎng)站的搜索權(quán)重指標(biāo)，所以HTTPS的網(wǎng)站在排名中也更有優(yōu)勢(shì)。

8. 后端能刪除前端設(shè)置的cookie嗎？

我回答是不可以的，我也不知道是不是對(duì)的，百度了一圈也沒有答案。。。有知道的大佬可以在評(píng)論區(qū)回答下。

9. 常見布局有幾種方式？

• 彈性布局(rem/em)
• 柵格化布局
• 百分比布局
• 浮動(dòng)布局
• ...

網(wǎng)上有很多種，可以自己去搜，這里就不多講了。

10. rem和em有區(qū)別嘛? 1em等于多少像素

rem和em單位一樣，都是一個(gè)相對(duì)單位，不同的是em是相對(duì)于元素的父元素的font-size進(jìn)行計(jì)算，rem是相對(duì)于 根元素html的font-size進(jìn)行計(jì)算。

1em相當(dāng)于當(dāng)前元素父元素的font-size

舉個(gè)栗子

<style>
 .box {
   font-size: 18px;
 }
 .box .children {
   width: 2rem; // 相當(dāng)于2 * 18 = 36px
 }
</style>
  <div class="box">
  <span class="children">里面</span>
</div> 

11. git用過吧？常見的命令有哪些？如果讓你來負(fù)責(zé)一個(gè)項(xiàng)目你怎么讓管理你的倉庫？

「常用命令」

# 創(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 // 查看當(dāng)前分支
git checkout -b // 添加一個(gè)新分支并切換過去

# 遠(yuǎn)程操作
git remote -v // 查看遠(yuǎn)程分支
git remote add <remoteURL> // 添加遠(yuǎn)程分支

最后說了下我管理庫的方式：首先我會(huì)在gitHub上創(chuàng)建一個(gè)倉庫，為當(dāng)前項(xiàng)目中每位開發(fā)人員取一個(gè)對(duì)應(yīng)的分支，讓其在對(duì)應(yīng)的分支開發(fā)。然后clone我這個(gè)倉庫。當(dāng)隊(duì)員需要向gitHub上傳代碼時(shí)，需要先將自己的代碼同步到自己遠(yuǎn)程倉庫對(duì)應(yīng)的分支中，再切換到要本地的主分支將自己本地開發(fā)的分支代碼進(jìn)行合并，如果有沖突先在本地解決，最后再同步到遠(yuǎn)程的主分支 復(fù)制代碼`

場(chǎng)景題

1. 如果有一張很大的圖片放到線上, 顯示要很久, 你會(huì)怎么優(yōu)化?

我當(dāng)時(shí)只回答了這兩點(diǎn)，其他的我也不知道。。。

• 用延遲加載技術(shù)
• 優(yōu)化圖片的大小

2. 如果讓你對(duì)element-ui中的表單進(jìn)行二次動(dòng)態(tài)封裝，你會(huì)怎么做？

對(duì)于這種題我回答的賊差，不敢誤人子弟，這里分享一個(gè)錯(cuò)的文章 組件化頁面：封裝el-form

3. 項(xiàng)目中遇到過那些復(fù)雜的業(yè)務(wù)場(chǎng)景，怎么解決的？

這個(gè)就看個(gè)人回答了，不同的項(xiàng)目遇到的問題也不一樣。

4. 封裝組件你有什么好的想法

對(duì)于這個(gè)問題我是蒙的，可能是因?yàn)槲液?jiǎn)歷上寫了很好的組件化開發(fā)思想吧（說實(shí)話當(dāng)時(shí)的回答有點(diǎn)打臉)，我是從代碼方面回答的。

通過vue.extend，vue.component注冊(cè)這種方式找到項(xiàng)目通用的模塊，指定通用部分代碼，props傳值，并且通過slot來自由定制內(nèi)容，然后創(chuàng)建vue文件。

對(duì)于這種問題網(wǎng)上也沒有好的回答，歡迎大佬在下方評(píng)論交流。

5. 在眾多表單中都需要用到點(diǎn)擊查詢按鈕根據(jù)參數(shù)的不同來彈出一個(gè)查詢框，里面有個(gè)小列表,查到數(shù)據(jù)后點(diǎn)一行再回顯， 你怎么封裝這個(gè)組件? (就是多個(gè)頁面中需要查詢顯示數(shù)據(jù)列表)

我說下我的大概思路，首先分析需求：需要什么？

• 一個(gè)form表單，一個(gè)table，分頁
• n個(gè)條件框，查詢按鈕、重置按鈕、其他功能按鈕。。

需要實(shí)現(xiàn)的功能

• 查詢
• 點(diǎn)擊分頁后查詢數(shù)據(jù)
• 重置
• 選中一行后拿到數(shù)據(jù)
• 其他功能的觸發(fā)

最后確定那些數(shù)據(jù)是需要外部傳入就ok了。

6. 你覺得你這個(gè)防小米商城項(xiàng)目中最大的亮點(diǎn)是什么？？

在訂單確認(rèn)頁面，使用自行封裝dialog通過slot自由定制內(nèi)容的方式來實(shí)現(xiàn)，新增、編輯、刪除收貨地址的對(duì)應(yīng)元素，用戶點(diǎn)擊的不同實(shí)現(xiàn)對(duì)應(yīng)功能。