前端（Vue，React）框架面試題總結

前言

Vue 是用于構建互動式的 Web 界面的庫，Vue 提供了 MVVM 資料系結和一個可組合的組件系統，具有簡單、靈活的 API，
React 是一個用于構建用戶界面的 JAVASCRIPT 庫，React 主要用于構建UI，React 擁有較高的性能，代碼邏輯非常簡單，越來越多的人已開始關注和使用它，

Vue 特點：

• 簡潔： HTML 模板 + JSON 資料，再創建一個 Vue 實體，
• 資料驅動： 自動追蹤依賴的模板運算式和計算屬性，
• 組件化： 用解耦、可復用的組件來構造界面，
• 輕量： ~24kb min+gzip，無依賴，
• 快速： 精確有效的異步批量 DOM 更新，
• 模塊友好： 通過 NPM 或 Bower 安裝，無縫融入你的作業流，

Vue 面試題總結

vue-cli工程

• 構建的 vue-cli 工程都到了哪些技術，它們的作用分別是什么？
• vue-cli 工程常用的 npm 命令有哪些？
• 請說出vue-cli工程中檔案夾和檔案的用處
• config檔案夾 下 index.js 的對于工程 開發環境 和 生產環境 的配置
• 請你詳細介紹一些 package.json 里面的配置

vue核心知識點

• 對于Vue是一套漸進式框架的理解
• vue.js的兩個核心是什么？
• 請問 v-if 和 v-show 有什么區別
• vue常用的修飾符
• v-on可以監聽多個方法嗎？
• vue中 key 值的作用
• vue-cli工程升級vue版本
• vue事件中如何使用event物件？
• $nextTick的使用
• Vue 組件中 data 為什么必須是函式
• v-for 與 v-if 的優先級
• vue中子組件呼叫父組件的方法
• vue中 keep-alive 組件的作用
• vue中如何撰寫可復用的組件？
• 什么是vue生命周期？
• vue生命周期鉤子函式有哪些？
• vue如何監聽鍵盤事件中的按鍵？
• vue更新陣列時觸發視圖更新的方法
• vue中物件更改檢測的注意事項
• 解決非工程化專案初始化頁面閃動問題
• v-for產生的串列，實作active的切換
• v-model語法糖的組件中的使用
• vue中自定義過濾器
• vue等單頁面應用及其優缺點
• 什么是vue的計算屬性？
• vue-cli提供的幾種腳手架模板
• vue父組件如何向子組件中傳遞資料？
• vue彈窗后如何禁止滾動條滾動？
• 計算屬性的快取和方法呼叫的區別
• vue-cli中自定義指令的使用
  

vue-router

• vue-router如何回應 路由引數 的變化？
• 完整的 vue-router 導航決議流程
• vue-router有哪幾種導航鉤子（ 導航守衛 ）？
• vue-router傳遞引數的幾種方式
• vue-router的動態路由匹配
• vue-router如何定義嵌套路由？
• 組件及其屬性
• vue-router實作路由懶加載（ 動態加載路由 ）
• vue-router路由的兩種模式
• history路由模式配置及后臺配置

vuex

• 什么是vuex？
• 使用vuex的核心概念
• vuex在vue-cli中的應用
• 在vue中使用vuex，修改state的值
• vuex actions異步修改狀態

http請求

• Promise物件是什么？
• axios、fetch與ajax有什么區別？
• 什么是JS的同源策略和跨域問題？
• 如何解決跨域問題？
• axios有什么特點？

UI樣式

• .vue組件的scoped屬性的作用
• 如何讓CSS只在當前組件中起作用？
• vue-cli中常用的UI組件庫
• 如何適配移動端？【 經典 】
• 移動端媒體查詢
• vue內容垂直和水平居中
• vue-cli引入圖片的方法
• 移動端常見樣式問題
• 文本超出隱藏
  

常用功能

• vue中如何實作tab切換功能？
• vue中keep-alive 實作標簽頁組件快取
• vue中實作頁面從右往左側滑入效果
• vue中父子組件如何相互呼叫方法？
• vue中央事件總線的使用

MVVM設計模式

• MVC、MVP與MVVM模式
• MVC、MVP與MVVM的區別
• MVVM的實作原理
• Object.defineProperty()方法
• ES6中定義的類和物件
• JS中的檔案碎片
• 解構賦值
• Array.from
• Array.reduce
• 遞回的使用
• Obj.keys()與Obj.defineProperty
• 發布-訂閱模式
• vue專案優化，縮短首屏加載時間

深入拓展

• vue開發命令 npm run dev 輸入后的執行程序
• vue的服務器端渲染
• 從零寫一個npm安裝包
• vue-cli中常用到的加載器
• webpack的特點
  
  篇幅有限，有需要面試資料【點擊這里】可以領取前端Vue，React框架面試題（含題目及答案）

React 特點：

• 宣告式設計：React采用宣告范式，可以輕松描述應用，
• 高效：React通過對DOM的模擬，最大限度地減少與DOM的互動，
• 靈活：React可以與已知的庫或框架很好地配合，
• JSX：JSX 是 JavaScript 語法的擴展，React 開發不一定使用 JSX ，但我們建議使用它，
• 組件：通過 React 構建組件，使得代碼更加容易得到復用，能夠很好的應用在大專案的開發中，
• 單向回應的資料流：React 實作了單向回應的資料流，從而減少了重復代碼，這也是它為什么比傳統資料系結更簡單，

React面試題總結

基本知識

• 區分Real DOM和Virtual DOM
• 什么是React？
• React有什么特點？
• 列出React的一些主要優點，
• React有哪些限制？
• 什么是JSX？
• 你了解 Virtual DOM 嗎？解釋一下它的作業原理，
• 為什么瀏覽器無法讀取JSX？
• 與 ES5 相比，React 的 ES6 語法有何不同？
• React與Angular有何不同？

React 組件

• 你理解“在React中，一切都是組件”這句話，
• 解釋 React 中 render() 的目的，
• 如何將兩個或多個組件嵌入到一個組件中？
• 什么是 Props?
• React中的狀態是什么？它是如何使用的？
• 區分狀態和 props
• 如何更新組件的狀態？
• React 中的箭頭函式是什么？怎么用？
• 區分有狀態和無狀態組件，
• React組件生命周期的階段是什么？
• 詳細解釋 React 組件的生命周期方法，
• React中的事件是什么？
• 如何在React中創建一個事件？
• React中的合成事件是什么？
• 你對 React 的 refs 有什么了解？
• 列出一些應該使用 Refs 的情況，
• 如何模塊化 React 中的代碼？
• 如何在 React 中創建表單
• 你對受控組件和非受控組件了解多少？
• 什么是高階組件（HOC）？
• 你能用HOC做什么？
• 什么是純組件？
• React 中 key 的重要性是什么？
  
  React Redux
• MVC框架的主要問題是什么？
• 解釋一下 Flux
• 什么是Redux？
• Redux遵循的三個原則是什么？
• 你對“單一事實來源”有什么理解？
• 列出 Redux 的組件，
• 資料如何通過 Redux 流動？
• 如何在 Redux 中定義 Action？
• 解釋 Reducer 的作用，
• Store 在 Redux 中的意義是什么？
• Redux與Flux有何不同？
• Redux 有哪些優點？

React 路由

• 什么是React 路由？
• 為什么React Router v4中使用 switch 關鍵字 ？
• 為什么需要 React 中的路由？
• 列出 React Router 的優點，
• React Router與常規路由有何不同？