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

Vue 框架

Vue 是一套用於構建用戶界面的漸進式框架，與其他大型框架相比，Vue 被設計為可以自底向上逐層應用。相比起其他框架 Vue 更加靈活，開發者既可以選擇使用 Vue 來開發一個全新項目，將 Vue 引入到一個現有的項目中。

Vue 的數據驅動是通過 MVVM(Model-View-ViewModel) 模式來實現，Vue 工作原理：

MVVM 包含3個部分分別是 Model、View 和 ViewModel。

• Model 指的是數據部分，主要負責業務數據；
• View 指的是視圖部分，即 DOM 元素，負責視圖的處理；
• ViewModel 是連接視圖與數據的數據模型，負責監聽 Model 或者 View 的修改。

Vue特性：

• 輕量級
  Angular 的學習成本高，使用起來比較復雜，而 Vue 相對簡單、直接，所以 Vue 使用起來更加友好。

• 數據綁定
  Vue 是一個 MVVM 框架，數據雙向綁定，即當數據發生變化的時候，視圖也就發生變化，當視圖發生變化的時候，數據也會跟着同步變化，這也算是 Vue 的精髓之處。尤其是在進行表單處理時，Vue 的雙向數據綁定非常方便。

• 指令
  指令主要包括內置指令和自定義指令，以 “v-” 開頭，作用於 HTML 元素。指令提供了一些特殊的特性，將指令綁定在元素上時，指令會給綁定的元素添加一些特殊的行為。例如，v-bind 動態綁定指令、v-if 條件渲染指令、v-for 列表渲染指令等。

• 插件
  插件用於對 Vue 框架功能進行擴展，通過 MyPlugin.install 完成插件的編寫，簡單配置后就可以全局使用。常用的擴展插件有 vue-router、Vuex等。

Vue 面試題

① Vue 基礎知識點

• Vue特性
• Vue項目結構介紹
• Vue 常用指令
• Vue常用的修飾符
• 條件渲染
• ......

② Vue 核心知識點

• 對於Vue是一套漸進式框架的理解
• vue.js的兩個核心是什么？
• 請問 v-if 和 v-show 有什么區別
• v-for 與 v-if 的優先級
• v-on可以監聽多個方法嗎？
• ......
  

③ Vue-cli 工程

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

④ Vue-router

• vue-router 如何響應 路由參數 的變化？
• 完整的 vue-router 導航解析流程
• vue-router 有哪幾種導航鈎子（ 導航守衛 ）？
• vue-router 傳遞參數的幾種方式
• 怎么定義 vue-router 的動態路由? 怎么獲取傳過來的值
• ......
  

⑤ Vuex

• 什么是 vuex？
• Vuex 解決了什么問題？
• 使用 vuex 的核心概念
• vuex 在 vue-cli 中的使用
• 在 vue 中使用 vuex，修改 state 的值
• ......
  

---

React 框架

React 主要用於構建 UI。你可以在 React 里傳遞多種類型的參數，如聲明代碼，幫助你渲染出 UI、也可以是靜態的 HTML DOM 元素、也可以傳遞動態變量、甚至是可交互的應用組件。

React 核心技術 —— 虛擬DOM（Virtual DOM）

在前端開發的過程中，我們經常會做的一件事就是將變化的數據實時更新到 UI 上，這時就需要對 DOM 進行更新和重新渲染，而頻繁的 DOM 操作通常是性能瓶頸產生的原因之一。

有時候我們會遇到這樣一種尷尬的情況：比如有一個列表數據，當用戶執行刷新操作時，Ajax 會重新從后台請求數據，即使新請求的數據和上次完全相同，DOM 也會被全部更新一遍並進行重新渲染，這樣就產生了不必要的性能開銷。

React 為此引入了虛擬 DOM（Virtual DOM）機制：對於每一個組件，React 會在內存中構建一個相對應的 DOM 樹，基於 React 開發時所有的 DOM 構造都是通過虛擬 DOM 進行，每當組件的狀態發生變化時，React 都會重新構建整個 DOM 數據，然后將當前的整個 DOM 樹和上一次的 DOM 樹進行對比，得出 DOM 結構變化的部分(Patchs)，然后將這些 Patchs 再更新到真實 DOM 中。整個過程都是在內存中進行，因此是非常高效的。

借用一張圖可以清晰的表示虛擬DOM的工作機制：

React 優點：

• React速度很快
  與其它框架相比，React 采取了一種特立獨行的操作 DOM 的方式。它並不直接對 DOM 進行操作。它引入了一個叫做虛擬 DOM 的概念，安插在JavaScript 邏輯和實際的 DOM 之間。這一概念提高了 Web 性能。在UI渲染過程中，React 通過在虛擬 DOM 中的微操作來實對現實際 DOM 的局部更新。

• 跨瀏覽器兼容
  虛擬 DOM 幫助我們解決了跨瀏覽器問題，它為我們提供了標准化的 API，甚至在 IE8 中都是沒問題的。

• 模塊化
  為程序編寫獨立的模塊化UI組件，這樣當某個或某些組件出現問題是，可以方便地進行隔離。每個組件都可以進行獨立的開發和測試，並且它們可以引入其它組件。這等同於提高了代碼的可維護性。

• 單向數據流
  Flux 是一個用於在 JavaScript 應用中創建單向數據層的架構，它隨着 React 視圖庫的開發而被 Facebook 概念化。它只是一個概念，而非特定工具的實現。它可以被其它框架吸納。

React 面試題

① 基本知識

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

② React 組件

• 你理解“在 React 中，一切都是組件”這句話
• 解釋 React 中 render() 的目的
• 如何將兩個或多個組件嵌入到一個組件中？
• state 和 props 有什么區別？
• React 中的狀態是什么？它是如何使用的？
• 區分狀態和 props
• 如何更新組件的狀態？
• 為什么不直接更新 state 狀態？
• React context 是什么？
• ......
  

③ React Redux

• MVC 框架的主要問題是什么？
• 解釋一下 Flux
• 什么是 Redux？
• Redux 遵循的三個原則是什么？
• 你對“單一事實來源”有什么理解？
• 列出 Redux 的組件
• 數據如何通過 Redux 流動？
• 如何在 Redux 中定義 Action？
• 解釋 Reducer 的作用
• Store 在 Redux 中的意義是什么？
• ......

④ React 路由

• 什么是 React 路由？
• 為什么 React Router v4 中使用 switch 關鍵字？
• 為什么需要 React 中的路由？
• 列出 React Router 的優點
• React Router 與常規路由有何不同？
• ......
  
  前端框架（Vue，React）面試題總結 PDF 文檔（含答案解析）：【點擊可免費領取！】