記5.27第一次面試，附題目

前言

前幾天終於收到人生第一份面試通知，面試了深圳的一家創業型公司，查了一下這家公司還挺不錯的，有很大的發展前景，面試官也很nice，無論面試結果如何，經過此次寶貴的面試機會也給我帶來知識上的查漏補缺。

原本打算錄下整個面試過程，帶上了心愛的AirPods，開啓了一波操做，面試完才發現一點兒聲音都沒錄進去，當場裂開，查了下緣由是由於戴上AirPods錄屏就沒聲音，因此趁着剛面試完立刻寫下這篇面試總結。

面試題

自我介紹一下

balabala...

講一下你作的項目

講了項目的一些基本的功能，當時有點緊張，並且是電話面試，沒有把功能講得很全，還好我在簡歷提供了項目預覽網址。

講一下微信小程序配置文件的字段的意思

我記得簡歷上沒寫小程序，面試官忽然就問起了小程序的內容。。當時的心情是what？

答：瞭解過mpvue可是沒作過項目，不會原生小程序。對vue比較瞭解。

看來要好好系統的學習小程序了，恰好最近在M課網買了小程序課程，學起來！

《微信官方文檔指南》

談談你對vue單文件組件的理解

答：vue的單文件組件，即以.vue結尾的文件，有一個template標籤，用來放頁面的結構，script標籤用來放js相關邏輯的內容，style標籤用來放相關的樣式，能夠提供一個scoped屬性防止樣式污染。

網上的標準答案：單文件組件

談談對SPA單頁面應用的理解

這個還真沒想起來，網上查了一下

SPA（ single-page application ）僅在 Web 頁面初始化時加載相應的 HTML、JavaScript 和 CSS。一旦頁面加載完成，SPA 不會由於用戶的操做而進行頁面的從新加載或跳轉；取而代之的是利用路由機制實現 HTML 內容的變換，UI 與用戶的交互，避免頁面的從新加載。
優勢：

用戶體驗好、快，內容的改變不須要從新加載整個頁面，避免了沒必要要的跳轉和重複渲染；
基於上面一點，SPA 相對對服務器壓力小；
先後端職責分離，架構清晰，前端進行交互邏輯，後端負責數據處理；

缺點：

初次加載耗時多：爲實現單頁 Web 應用功能及顯示效果，須要在加載頁面的時候將 JavaScript、CSS 統一加載，部分頁面按需加載；
前進後退路由管理：因爲單頁應用在一個頁面中顯示全部的內容，因此不能使用瀏覽器的前進後退功能，全部的頁面切換須要本身創建堆棧管理；
SEO 難度較大：因爲全部的內容都在一個頁面中動態替換顯示，因此在 SEO 上其有着自然的弱勢。

vue綁定class的方式

答：經過用v-bind指定綁定class屬性，能夠用對象的方式也能夠用數組的方式提供類名，通常用來切換樣式，如某個條件爲true時就添加這個類名樣式。

官方文檔：Class和Style綁定

v-if和v-show的區別

答：v-if是真正的條件渲染，v-show是渲染了，經過display爲none控制。

談談你對虛擬DOM的理解

答：emmmmm...忘了

其實這個好久前看過，可是複習的時候沒複習到。。。

能夠看掘金大佬這篇：《深刻剖析：Vue核心之虛擬DOM》

對vuex的理解

答：vuex經過state提供狀態，mutations修改轉態，actions異步函數也能夠編寫多個mutation一併提交，getters獲取狀態，至關於computed。

最近剛作了一個音樂web app，對vuex真的熟透於心啊！

官方文檔：vuex

談談vue的單向數據流

這個概念我給忘了，其實就是父組件傳遞子組件，只能單向傳遞，子組件不能修改父組件傳遞過來的數據。。。全部的 prop 都使得其父子 prop 之間造成了一個單向下行綁定：父級 prop 的更新會向下流動到子組件中，可是反過來則不行。子組件能夠經過$emit派發一個自定義事件，父組件接收到後，有父組件修改。

vue中如何監聽一個數組的變化

答：能夠經過watch監聽，當數組發生變化時，就會觸發watch中對應變量的函數。

官方文檔：watch偵聽器

vue中key的做用

我聽成字母k。。。問面試官是否是字母的k，他說是，當場懵了，後面就說沒聽過，面試完纔想起來是key。。。

key通常跟v-for配合使用，還有vue的transition-group也須要綁定key。

key 的特殊 attribute 主要用在 Vue 的虛擬 DOM 算法，在新舊 nodes 對比時辨識 VNodes。若是不使用 key，Vue 會使用一種最大限度減小動態元素而且儘量的嘗試就地修改/複用相同類型元素的算法。而使用 key 時，它會基於 key 的變化從新排列元素順序，而且會移除 key 不存在的元素。

有相同父元素的子元素必須有獨特的 key。重複的 key 會形成渲染錯誤。

講一下vue的生命週期

答：vue的生命週期分爲三個階段，初始化、運行中、銷燬。一個完整的生命週期，從開始建立、初始化數據、編譯模板、掛載dom、渲染、更新、渲染、銷燬

beforeCreate=>new Vue()，初始化事件和生命週期，而後就執行beforeCreate，此時數據尚未掛載，沒法訪問數據和dom，通常不作操做

created=>掛載數據，綁定事件觸發，可使用數據更新數據，但不會觸發updated函數，通常用來作初始數據的獲取

beforeMount=>render函數首次被調用，找實例或者組件對應的模板後觸發，虛擬dom建立，準備渲染，這裏也能夠用來初始數據的獲取，不會觸發updated鉤子

mounted=>渲染了真實dom，組件出如今頁面中，但不保證全部子組件都被掛載，可使用vm.$nextTick確保全部組件都被掛載

beforeUpdate=>當組件或實例的數據更改以後立馬指向，通常不在這個鉤子作什麼事

updated=>當數據更新完後當即執行

beforeDestory=>當通過某種途徑調用$destroy方法後，當即執行beforeDestroy，用來清除計時器、清除非指令綁定的事件等等

destoryed=>組件的數據綁定、監聽...去掉後只剩下dom空殼，這個時候，執行destroyed，在這裏作善後工做也能夠

有了解過vue的ssr嗎

答：emmmmm...沒有。

而後問面試官什麼是ssr，面試官說是一種服務端渲染，纔想起來原來是NUXTJS，聽過可是沒用過唉。

Vue.js 是構建客戶端應用程序的框架。默認狀況下，能夠在瀏覽器中輸出 Vue 組件，進行生成 DOM 和操做 DOM。然而，也能夠將同一個組件渲染爲服務端的 HTML 字符串，將它們直接發送到瀏覽器，最後將這些靜態標記"激活"爲客戶端上徹底可交互的應用程序。

即：SSR大體的意思就是vue在客戶端將標籤渲染成的整個 html 片斷的工做在服務端完成，服務端造成的html 片斷直接返回給客戶端這個過程就叫作服務端渲染。

nuxtjs中文官網

面試官：那我來問一下基礎吧。

心想還好以前怒刷了一遍紅寶書和阮老師的ES6入門。

談談你對閉包的理解

答：閉包就是一個函數能夠訪問另一個函數內部的變量。閉包的優勢是能夠延伸變量的做用範圍

面試官：缺點呢。

答：容易形成內存泄漏，而後就講了會形成內存泄漏的幾種場景，定時器、DOM引用、全局變量。

說一下什麼是原型和原型鏈

答：在js中，每一個對象都有個prototype屬性指向原型對象，balabala...，而後順便講了new的過程。

面試官：Object的原型對象指向什麼

答：null

能夠參考我寫的這一篇：理解原型與原型鏈

css選擇器的優先級

答：!important>內聯樣式>ID選擇器>類選擇器>標籤選擇器>繼承

感受回答得不是很好，其實還要考慮到優先級的計算。

網上標準答案：CSS選擇器優先級

什麼是bfc

答：BFC簡稱塊級格式上下文，BFC是頁面上的一個隔離的獨立容器，不受外界干擾或干擾外界；

觸發BFC的條件是float不爲none；overflow不爲visible；position爲absolute或fixed；

display爲inline-block或table-cell、table-caption

BFC通常被用來清除浮動、避免某些元素被浮動元素覆蓋、阻止外邊距重疊

說說你對盒子模型的理解

答：有兩種盒子模型，IE盒子模型和標準盒模型，IE盒模型經過box-sizing屬性設置爲border-box，IE盒模型width屬性等於盒子的總寬度，標準盒模型寬度等於width+border+padding。

瞭解rem和em嗎

答：rem是基於html的font-size，em基於父元素的font-size。

講一下HTML5的新標籤

答：語義化標籤：

媒體標籤：

如何實現垂直居中

答：1.flow佈局，在主軸是橫軸的狀況下，設置側軸align-items屬性爲center；2.設置絕對定位，top爲50%、transform爲translateY(-50%)，3.元素是行內塊級元素, 使用display: inline-block, vertical-align: middle。

這個問題答得很差，回答得不全，也沒考慮到兼容性問題。

回來查了一下掘金的文章，推薦這篇《16種方法實現水平居中垂直居中》

對數據結構和算法瞭解多嗎

講了只知道棧、堆、隊列、列表。。其餘的當時想不起來。

數據結構算法對我來講真是硬傷，最近也在努力的刷LeetCode。不過確實像修言大佬說的同樣，前端學數據結構算法是爲了應付面試。。。前端工程纔是前端工程師應該關注的。

如何實現冒泡排序

冒泡排序也給忘了~我真的是菜到摳腳啊。

function BubbleSort(arr) {
      const length = arr.length

      for (let i = 0; i < length; i++) {
        for (let j = 1; j < length - i; j++) {
          if (arr[j] < arr[j - 1]) {
            const temp = arr[j]
            arr[j] = arr[j - 1]
            arr[j - 1] = temp
          }
        }
      }

      return arr
    }

講一下js中的內置對象

答：基礎類型：Number、String、Boolean、null、undefined

複雜類型：Array、Object

我寫了一篇《js內置對象常見方法清單》

你還有什麼問題想問的嗎

問了一下公司的實習期和技術棧，沒了。

面試官：這周內給你答覆。

感受有點涼涼~

最後

總結一下此次面試，感受此次的面試題問的範圍不是很廣，如前端安全、前端存儲、瀏覽器緩存、網絡相關、ES6等方面的問題都沒被問到，可能每一個公司的側重點都不同吧hhh。而後是本身知識方面的欠缺，如排序、虛擬dom、小程序、ssr、數據結構算法，後續須要對這方面知識增強學習。

這是人生的第一次面試，也是對本身的一次查漏補缺，面試前參考了掘金其餘小夥伴的面經總結，感受你們都寫得不錯，等拿到心儀的offer以後，打算再寫一篇面經總結。不過從目前看，不少招聘網站的公司都基本不招應屆生了，趁着這段時間繼續提高本身，爭取2年內達到阿里P6以上！

固然也但願若是有公司能看上小弟我，提供一個面試機會，小弟感激涕零😭

最後附上最近作的一個移動端音樂web app項目