初級前端的面試之路（一）

如下若有不對或錯誤的地方，歡迎各位大佬指點，謝謝！

CSS相關

如何讓子元素在父元素中垂直居中

1、已知子元素的高度和寬度

• 經過定位和設置子元素負邊距實現

.parent{
  width:600px;
  height:600px;
	position:relative;
}
.children{
  width:100px;
  height:100px;
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-50px;
  margin-right:-50px;
}
複製代碼

• 經過定位和 margin:auto 實現

.parent {
  width: 500px;
  height: 500px;
  background: black;
	position: relative;
}

.children {
  width: 200px;
  height: 200px;
  background: white;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
複製代碼

2、不知子元素的高度和寬度

1. 經過定位和設置 transform:translate 屬性實現

.parent{
  width:600px;
  height:600px;
	position:relative;
}
.children{
  width:100px;
  height:100px;
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-50px;
  margin-right:-50px;
}
複製代碼

2. 使用 flex 彈性盒實現

.parent{
	width:500px;
	height:500px;
	display:flex;
	justify-content:center;
	align-items:center;
}
複製代碼

JavaScript 相關

JS 中有哪些基本類型

number、string、boolean、null、undefined、symbol

談一談經常使用的循環遍歷方法

1. for 循環

這個算是最基礎的循環遍歷方法了

2. forEach

forEach 循環中，能夠對每一次元素採起操做，沒有返回值。另外，該方法在全部元素調用完畢以前不能中止，沒有 break 語句。

3. map

該方法返回一個新數組，數組中的元素爲原數組內元素調用函數處理後的值

4. filter

一樣返回一個新數組，會經過函數調用過濾掉元素，返回符合規則的元素組成的新數組

面試時答出了這四個，固然還有 some、every、reduce 等等...最後面試官又補充了 find 方法：

find（） 方法返回數組中知足提供測試函數的第一個元素的值，舉個🌰

let array = [1, 3, 4, 5, 7, 9, 8]

let findNum = array.find(val => {
  return val % 2 == 0
})
console.log(findNum)
// --> 4
複製代碼

VUE相關

Vue有哪些生命週期

1. beforeCreact
2. created
3. beforeMount
4. mounted
5. beforeUpdate
6. update
7. beforeDestory
8. destoryed

還有當使用<keep-alive>的時候，配合使用的：

9. activated
10. deactivated

你以爲數據請求放在那個生命週期裏更好？

我更偏向於放在 created 裏面，由於在這個時期，Vue 中的 Data 已經生成，若是咱們請求過來的數據是 Data 裏面須要的數據，須要在渲染頁面以前就拿到數據，那麼在 created 裏面獲取最好。

可是若是咱們須要在頁面渲染完成以後，能夠放在 mounted 裏面

可是若是數據對 DOM 屬性有更改的話，放在 mounted 裏面，可能會致使閃屏問題

（期待大佬們更多更準確的回答）

v-if 和 v-show 的區別

v-if 是真正的條件渲染，經過判斷是否知足條件，決定是否渲染 DOM 節點

而 v-show 的狀況下，始終都會渲染該 DOM 節點，僅是經過修改 display 是否爲 none 決定是否顯示該節點

Vue 組件之間通訊都有哪些方式

父子組件

父子組件能夠經過 props 傳遞數據給子組件，子組件能夠經過 emit 發送事件傳遞數據給父組件。要注意的是，子組件不能直接修改 props ，必須經過發送事件去告知父組件修改數據

咱們還能夠經過 $parent 或者 $children 這兩個對象來訪問父組件或者子組件實例中的方法和數據

兄弟組件

最簡單的兄弟組件之間通訊能夠經過查找父組件中的子組件，經過 this.$parent.chidren，而後在 $children中能夠經過組件的 name 查詢到須要的組件實例，從而去獲取相關的數據，進行通訊

跨組件通訊

1. 可使用 provider/ inject

// parent
export default {
  provide:{
    data:"this is parent's data"
  }
}

// child
export default {
  inject:['data']
}
複製代碼

2. 可使用 Event Bus

我所理解的 Event Bus 就是建立一個公共的 Vue 實例，全部組件均可以去調用這個實例上的事件觸發（$emit 和 $on），從而實現通訊和參數的傳遞

首先，咱們須要建立時間總線並將其導出，便於以後咱們有須要用到總線的模塊裏進行導入並實施監聽它。建立總線有兩種方式：

// 1:
import Vue fome ‘vue’
export const EventBus = new Vue()

// 2:
Vue.prototype.$EventBus = new Vue()
複製代碼

而後咱們須要在用到總線的組件中將其引入

import EventBus from ‘你的 Event Bus 的路徑’
複製代碼

在發送數據的一方，使用 $emit 方法發送數據

method:{
  sendMessage:function(){
    EventBus.$emit("transfer",data)
  }
}
複製代碼

上述代碼中，經過調用所導入的 EventBus 實例上的$emit方法，去發送數據。（第一個參數爲事件名，咱們以後要經過這個事件名去接收所傳遞的數據，第二個參數也就是代碼中的 data 是你要傳遞的數據）

在接收數據的一方，使用 $on 監聽事件，獲取數據

mounted(){
  EventBus.$on("transfer",(data) => {
    console.log(data)
  })
}
複製代碼

3. Vuex

這兩天的面試中，都被問到了 Vuex...

我所理解的 Vuex 就像是一個房頂的「儲藏室」，你們夥（各組件）能夠從這個倉庫裏拿取一些東西（state），也能夠往這個倉庫放一些東西（修改 state）

這是官方文檔給的說明圖，在Vuex裏，若是想要修改某一個 state，咱們須要在組件裏 dispatch 一個 Vuex 中的 ation，每個 action 都會去 comiit 一個 mutation,從而去修改 state。

這是較爲粗魯的回答吧，雖然我在面試的時候都是這樣回答相似 「怎麼用Vuex」 這類的問題。在面試中還遇到了以下問題：

• 爲何不能直接去 commit 一個 mutation？

我翻閱了官方文檔，給出的解釋是：

再次強調，咱們經過提交 mutation 的方式，而非直接改變 store.state.count，是由於咱們想要更明確地追蹤到狀態的變化。這個簡單的約定可以讓你的意圖更加明顯，這樣你在閱讀代碼的時候能更容易地解讀應用內部的狀態改變。此外，這樣也讓咱們有機會去實現一些能記錄每次狀態改變，保存狀態快照的調試工具。有了它，咱們甚至能夠實現如時間穿梭般的調試體驗。 因爲 store 中的狀態是響應式的，在組件中調用 store 中的狀態簡單到僅須要在計算屬性中返回便可。觸發變化也僅僅是在組件的 methods 中提交 mutations。

我所理解的就是，因爲 vue 倡導響應式的數據，直接去 commit 一個 mutation 的時候，至關於咱們直接去修改 store 裏面的 state，Vuex 追蹤不到數據的變化。而咱們知道每個 mutation 都有一個事件類型（type）和一個回調函數，咱們每次都須要以相對應的 type 去觸發某個回調函數，這樣 Vuex 能夠追蹤到你的每一次操做，保證數據的響應式。

• action 和 mutation 有什麼區別？

這個問題回答的比較失敗，由於忘記了一些概念和使用場景，我當時的回答過於白話，我說：action 比如告訴 Vuex 我要作什麼事情，而 mutation 是去執行怎麼作...

我以爲比較合理的回答是：

1. action 內能夠執行異步操做，而 mutation 必須是同步的
2. action 更專一於業務代碼的實現，mutation 專一於修改 state，理論上是惟一途徑

Nuxt 相關

以前在上家公司接觸過一小段時間的 Nuxt，因爲時間較短，瞭解和掌握的也不是太多,回答的都不怎麼好，看來須要惡補一下官方文檔了...

Nuxt 怎麼獲取服務器端數據

這道題我理解錯誤了，而且對於知識也有點淡忘...，當時回答了利用 axios（這還用我說？哈哈）

面試官想聽到的答案是：asyncData

你可能想要在服務器端獲取並渲染數據。Nuxt.js添加了asyncData方法使得你可以在渲染組件以前異步獲取數據。

該方法會在組件（頁面組件）加載以前被調用，能夠在服務器端或路由更新前被調用

還有 fetch！

fetch 方法用於在渲染頁面前填充應用的狀態樹（store）數據， 與 asyncData 方法相似，不一樣的是它不會設置組件的數據。

export default {
  async fetch ({ store, params }) {
    let { data } = await axios.get('http://my-api/stars')
    store.commit('setStars', data)
  }
}
複製代碼

Nuxt怎麼作 SEO 優化

咱們能夠經過在 nuxt.config.js 文件中配置全局的 head ，也能夠在單獨的頁面中單獨配置。在 head 裏面咱們能夠配置咱們頁面的 title 和 meta 標籤，結合各大搜索引擎的規則，從而實現 SEO 優化。

head(){
  return {
    title:'......',
    meta:[
      {
        xxx:'...'
        ...
      }
    ]
  }
}
複製代碼

經過投簡歷和兩場面試能夠感覺到，北京目前對於應屆生來講的確不是很友好，可是既來之，則安之，不要去抱怨，作好本身吧！加油！加油！加油ヾ(◍°∇°◍)ﾉﾞ！