前端程序員必備的面試題整理

正在持續更新中... ,路過的朋友，能夠點個贊，關注一下~~~

01，Promise原理？

Promise 是異步編程的一種解決方案，比傳統的解決方案——回調函數和事件——更合理，更強大。

promise有三種狀態，等待態、成功態、失敗態，當new一個promise實例對象的時候，傳遞兩個對應的方法，onFulfilled,onRejected,並初始化當前的狀態，當狀態發生改變的時候便會觸發對應的方法，成功-onFulfilled,失敗-onRejected， 若狀態一直沒有改變，則一直處於等待狀態，即當異步程序處理完了以後再改變狀態，完成異步任務。

在整個過程當中，牽扯到 promise的鏈式調用，以及異步的暫存（處於等待狀態的先存儲起來）與調用（狀態改變便進行調用）

參考文檔：

• promise解決異步

• javascript異步解決方案

02，then能夠鏈式調用，多個then時，若是走到下一個then的失敗回調？

答：1，返回一個失敗的promse 2，拋出一個錯誤

03，then能夠鏈式調用，多個then時，如何終止下一個then的調用？

答：返回一個處於pending(等待)狀態的promise

04，js的異步解決方案有哪些()？

1. 回調函數（node，嵌套，err）。
2. Promise。
3. Generator+co。 co能夠解決promise嵌套問題。
4. generator+promise(promise嵌套問題)
5. async+await 是Generator的語法糖

05，把一個僞數組變成真實的數組？

• 使用擴展運算符... eg. [...obj] (須要保證obj是可迭代 )
• 數組上的方法from, eg. Array.from()
• 數組的slice方法，eg. [].slice.call(obj)

擴展運算符：須要保證obj是可迭代 Array.from不須要保證obj是否可迭代，內部會使它可迭代

06，使用過ES6中的哪些新語法（** 熟練使用ES語法）？

答：解構賦值 [] {} Map : 裏面存儲惟一的值 WeakMap Set ES6中的模塊化 箭頭函數 裝飾器 模板字符串 數組中一堆方法 reduce map filter some every..... 對象中一堆方法 Object.key() Object.defindproty Objct.value Objtct.xxxx 類，繼承 構造器 原型鏈 Proxy ---- defindprototy
Symbol ...

30，v-model是本質是？

v-model：是一個語法糖，本質是 :value 與 @input

<Son2 :value="counter" @input="newValue=>counter = newValue"></Son2>

<Son2 v-model="counter"></Son2>
複製代碼

31，說一下vue中的生命週期？

beforeCeate 實例化vue後，走的第一個鉤子，此時尚未數據劫持 created vue實例已經建立完成，數據偵測OK，methods,computed也OK了，el OK
beforeUpdate data改變了 準備渲染視圖 domdiff updated 渲染視圖完畢 不要去修改data,可能死循環 beforeDestroy vm銷燬以前調用 destroyed 銷燬以後調用

32，在vue的鉤子，一般會作哪些事情？

• created vm已建立完成 發起ajax請求
• mounted vm已掛載完成 發起ajax請求 操做dom
• beforeUpdate 再近一步去修改狀態 不會從新渲染
• updated 不能修改數據
• beforeDestroy 優化操做，清空定時器，解除事件綁定

33. vue的生命週期具體適合哪些場景？畫出vue的生命週期？

Vue生命週期在真實場景下的業務應用

• created:進行ajax請求異步數據的獲取、初始化數據

• mounted:掛載元素dom節點的獲取

• nextTick:針對單一事件更新數據後當即操做dom

• updated:任何數據的更新，若是要作統一的業務邏輯處理

• watch:監聽數據變化，並作相應的處理

vue的生命週期

34. vue實例上的屬性？

vm.$data：Vue 實例觀察的數據對象 vm.$options：用於當前 Vue 實例的初始化選項。 vm.$nextTick： vm.$el： 獲取到真實的dom 獲取到的可能不是更新後的 須要在下一下事件環中獲取更新後的dom元素 vm.$watch： 監控一個數據 vm.$set： 將數據設置成響應式 vm.$delete： 刪除對象的屬性。

35. 爲何一般不使用index做爲key?

key的做用

做用：高效的更新虛擬DOM，key是給DOM添加惟一的標識，當元素髮生改變的時候，經過domdiff算法，作到更小更新，提升性能。 歸納說：改變的元素進行更新，不改變的不更新

緣由

使用index做爲key時，可能存在DOM元素沒有發生改變，只是順序發生了改變，可是此時的key的值就發生了改變，根據domdiff算法，就會更新全部key變化的DOM元素

例如：渲染一個數組，綁定index，做爲惟一標識，當數據進行倒序排序時，DOM元素沒變，順序發生了改變，但此時DOM上的key發生了改變，就會從新進行渲染，浪費性能。

36. computed,watch,methods的區別？

• computed：計算屬性有緩存，若是計算屬性所依賴的數據沒有必變，它會去緩存中取
• methods：方法是沒有緩存，每一次拿數據，都會調用這個方法
• watch：監控數據的變化，第1次編譯沒有觸發 須要配合mounted鉤子，或者使用immediate: true使第一次編譯時觸發

computed 和 methods的區別

• computed有緩存
  • computed中的方法，主要是依據data中的數據生成的新的數據，裏面的方法，在第一次編譯調用以後便再也不進行調用（數據不改變的狀況下），即數據不更新便再也不執行。
• method沒有緩存
  • 只要使用該方法便進行調用。

computed和watch有什麼區別

• 大多數狀況下，computed和watch均可以互換，
• watch中能夠寫異步，
• watch中的寫法複雜一點，
• watch能夠實現一些簡單的功能

watch和方法有區別？

• watch主要是用來監控數據變化
• 方法裏面就是寫一些常規的方法
• 二者沒有太大的聯繫

特別提醒

能使用computed就不要使用watch

37. 項目中是如何封裝axios？

1. 發出請求，響應數據
2. loading動畫，攜帶請求頭，處理響應數據(請求攔截和響應攔截)
3. queue 避免同一個請求發出屢次，（有動畫時，也避免多個動畫）
4. cancelToken 切換到下一個頁面時，把上一個頁面相關的請求給取消(沒有完成的)

38. 防抖節流的應用？

函數防抖(debounce)： 在事件被觸發n秒後再執行回調，若是在這n秒內又被觸發，則從新計時；

典型的案例就是輸入搜索：輸入結束後n秒才進行搜索請求，n秒內又輸入的內容，就從新計時。

函數節流(throttle)： 規定在一個單位時間內，只能觸發一次函數，若是這個單位時間內觸發屢次函數，只有一次生效；

典型的案例就是鼠標不斷點擊觸發，規定在n秒內屢次點擊只有一次生效。

39. vue中是如何緩存數據，避免從新請求接口數據的？

答：使用keep-alive，能在組件切換過程當中將狀態保留在內存中，防止重複渲染DOM。

40. 封裝axios時，爲何會用到cancelToken來取消請求？

答：切換頁面的時候，可能上個頁面的請求尚未請求完，取消上一次的頁面中的請求，提升性能

41. 項目中記錄頁面中的位置信息，通常保存在什麼地方？

答：瀏覽器的 sessionStorage

42. vue頁面中有一萬條數據，你是怎麼給它渲染出來的？

答：採用分頁渲染，如不能分頁，使用虛擬列表（長列表），相似cubeui中的RecycleList長列表渲染

參考文檔

• cubeui中的RecycleList的使用

43. vue中的項目是如何優化的？

答： 代碼角度的優化 ；性能角度的優化；用戶體驗角度的優化

能夠參考具體的優化方案：

• vue面試題之vue項目的優化方案

44. 首頁出現白屏，是怎麼解決的？

答：

1. ssr 服務端渲染 須要寫代碼 有Nuxt框架
2. 若是頁面內容不常常變更，如公司官網，可使用預渲染 配置
3. 能夠配置骨架屏（經常使用）

45. 簡述vue-router的原理

1. 自定義一個 vue-router 類，該類中規定必須有一個install的靜態方法
2. 引入自定義的vue-router,並在vue中使用這個中間件，當使用Vue.use時，便會自動的調用vue-router中的install(Vue)靜態方法，並將全部的組件做爲參數依次傳入。

import VueRouter from "./vue-router" Vue.use(VueRouter);

3. 在install靜態方法中，使用Vue.mixin()爲每一個組件都混入一個beforeCreate方法，在beforeCreate方法中，如果main根組件，則將main.js中的參數router掛載到自身_router上，並將本身掛載到自身的屬性_root上，若不是根組件，則將父組件的_root掛載到自身的_root，(此處相似於遞歸設置)
4. 在beforeCreate中爲每一個組件都添加一個 $router 與 $route的屬性，$router指向自定義vue-router 中的靜態方法；$route指向當前存放對的路由裏面的屬性
5. 在自定義的vue-router中設置一個構造器，用於接收new 自定義vue-router時傳遞的參數（mede,router....）,轉換路由格式，而且處理不一樣的路由模式（hash,history），將處理後的當前路由進行保存，
6. 在install(Vue)中定義全局的router-link組件，使用屬性傳值與匿名插槽定義，顯示的路由，當點擊時進行跳轉，
7. 在install(Vue)中定義全局的router-view組件，獲取當前路由，與路由表，相比對，進行渲染。

vue-router 原理 圖示