前端面試錦集之 vue 面試總結

一、 vue 面試題

1. axios 是什麼？怎麼使用？描述使用它實現登錄功能的流程？它與 fetch、ajax 的區別是什麼？答案如下：

• axios 是基於 promise 用於瀏覽器和 node.js 的一個 http 客戶端，主要用於向後臺發起請求的，以及在請求中做更多的控制
• 支持 promise，提供了一些併發的方法，提供攔截器，提供支持 CSRF，跨站請求僞造
• axios 與 fetch 都是基於 promise 的語法，後者默認是使用 callback 的方式。fetch 本質上脫離 xhr 是新的語法，有自己的特性，默認不傳 cookie，不要想 xhr 這樣去監聽請求的進度
• 登錄功能的流程，http request 攔截器，判斷是否存在 token，如果存在的話，則對每個 http header 都加上 token。http response 攔截器，返回 401 清除 token 信息並跳轉到登錄頁面，返回接口的錯誤信息

2. Vuex 是什麼？怎麼使用？哪種功能場景使用它？答案如下所示：

• Vuex 是一個專門爲 vue 構建的狀態集管理，主要是爲了解決組件間狀態共享的問題，強調的是集中式管理
• 主要是便於維護，便於解耦，所有不是所有的項目都適合使用 vuex，如果不是構建大型項目，使用 vuex，反而會使你的項目代碼繁瑣多餘
• vuex 的核心是 state、mutations、getters、actions 和 modules

3. 說出 4個 vue 當中的指令和它的用法，答案如下所示：

• v-if 條件渲染指令，代表存在銷燬
• v-bind 綁定指令，用來綁定屬性，簡寫方式是 ：
• v-on 堅持事件指令，簡寫方式是 @
• v-for 循環指令

4. 導航鉤子有哪些？它們有哪些參數？答案如下所示：

• 導航鉤子就是路由的生命週期函數，vue-router
• 它分爲兩種，一種全局的，另一種是局部的
• 全局的鉤子函數，beforeEach 是在路由切換開始時調用，afterEach 是在路由切換離開時調用
• 局部到單個路由，beforeEnter
• 組件的鉤子函數，beforeRouterEnter、beforeRouterUpdate 和 beforeRouterLeave
• to 表示即將進入的目標對象，from 表示當前導航要離開的導航對象，next 表示是一個函數調用 resolve 執行下一步

5. v-model 是什麼？vue 中標籤怎麼綁定事件？答案如下所示：

• vue 中利用 v-model 來進行表單數據的雙向綁定
• 實際上只做了兩步，v-bind 綁定了一個 value 的屬性，利用 v-on 把當前的元素綁定到了一個事件上

6. Vue 組件封裝的過程，如何封裝一個 Vue 組件？答案如下所示：

• 封裝組件主要就是爲了解耦，通用組件必須具備高性能、低耦合的特性，往往在通用組件中留一個插槽
• 自定義組件 data 必須是一個函數，這是爲了防止組件與組件之間聲明的變量互相影響

7. swiper 插件從後臺獲取數據沒問題，css 代碼也沒有問題，但是圖片不動，應該怎麼解決？答案如下所示：

• 主要原因是 swiper 提前初始化了，而這個時候數據還沒有完全出來
• 解決方法有兩個方向，一個從 swiper 入手，一個是從 vue 入手
• vue 中專門提供了一個方法 nextTick(), 用於解決 dom 的先後執行問題

8. vue 路由懶加載的理解，答案如下所示：

• 路由懶加載，也叫延遲加載，即在你需要的時候加載

9. vue-loader 的理解，答案如下所示：

• vue-loader 就是一個加載器，能把 vue 組件轉化成 Javascript 模塊
• 轉義這個 vue 組件，可以動態的渲染一些數據
• 優化了 script 中可以直接使用 ES6、Style，也默認可以使用 sass，還提供了作用域的選擇
• 在開發階段中，還提供了熱加載

10. 用過插槽嗎？用的是具名插槽還是匿名插槽？答案如下所示：

• 在 vue 中，插槽包括三種，分別是默認插槽( 匿名插槽)、具名插槽和作用域插槽。
• 匿名插槽是沒有名字的，只要是默認的，都會填到這裏，而具名插槽是具有名字的

11. 說說你對於 vue 中虛擬 DOM 的理解，答案如下所示：

• 虛擬 DOM 就是以 JS 對象形式去添加 DOM 元素
• 本質上是優化了 diff 算法，採用了新舊 DOM 的對比獲取差異的 DOM，一次性更新到真實的 DOM 上
• 虛擬 DOM 本身也有自己的缺陷，適合批量修改 DOM，儘量不要跨層級修改 DOM，設置 key, 可以最大的利用節點

12. 如何理解 Vue 中的 MVVM 模式，答案如下所示：

• MVC 是指 model、view 和 controller
• MVVM 是指 model、view 和 viewModel，vue 是專注於 view 和 viewModel 這樣的框架

13. Vue 中的 keep-alive 的作用，答案如下所示：

• keep-alive 能夠讓不活動的組件 “活着”，提供了 include 和 exclude 兩個屬性允許組件有條件的緩存
• 實現的原理是在 created 的時候將需要緩存的 vnode 節點放到 cache 中，在 render 的時候根據 name 再進行取出來