vue面試題的示例及解答方法

這篇文章主要介紹了vue面試題的示例及解答方法，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

Vue 越來越受歡迎了。放眼國內外，不管是 BAT 等大廠，還是創業公司，Vue 都有廣泛的應用。面試的時候，Vue 相關技術原理也一定是必考點。可以說，對于任何一個前端工程師來說，掌握 Vue 可能不是一個可選項，而更像一門“必修課”。

很多人做vue項目都是直接element ui等UI框架直接上，這些框架雖然在效率上幫了我們很多，但是，對于我們的技術提升而言，其實沒有任何的提升，而對于面試官提問的vue核心技術，你也肯定回答不上來。

對于一位開發者來說，如果你對一個技術框架從來都是只停留在會用上，而從來不去了解這個框架里面核心技術的實現原理和背后的設計思想，我想在技術這條路上肯定走不遠，我自己作為開發者我有非常深刻的體會.在這里也給大家做個走心的推薦，ant Design vue這個ui框架的作者在極客時間推出了一門課，叫vue開發實戰（文章底部有購買鏈接）。我自己也購買了這門課，覺得講的不錯，會帶著你掌握 Vue 的技術原理及其應用， 也會對其底層原理有所了解，并且通過實戰項目，你將具備獨立負責 Vue 前端項目的能力，對你的跳槽和面試以及vue的入門將會有非常大的幫助，很多購買者包括我自己也覺得這里面干貨滿滿。推薦給大家有需要的人。

好了，進入正題，今天在這里給大家帶來一點vue的進階面試題。

1、什么是MVVM？
答：MVVM是是Model-View-ViewModel的縮寫，Model代表數據模型，定義數據操作的業務邏輯，View代表視圖層，負責將數據模型渲染到頁面上，ViewModel通過雙向綁定把View和Model進行同步交互，不需要手動操作DOM的一種設計思想。

2、怎么定義vue-router的動態路由？怎么獲取傳過來的動態參數？
答：在router目錄下的index.js文件中，對path屬性加上/:id。  使用router對象的params.id

3、vue-router有哪幾種導航鉤子？    
答：三種，一種是全局導航鉤子：router.beforeEach(to,from,next)，作用：跳轉前進行判斷攔截。第二種：組件內的鉤子；第三種：單獨路由獨享組件

4、vuex是什么？怎么使用？哪種功能場景使用它？
答：vue框架中狀態管理。在main.js引入store，注入。新建了一個目錄store，….. export 。場景有：單頁應用中，組件之間的狀態。音樂播放、登錄狀態、加入購物車

5、MVVM和MVC區別？和其他框架(jquery)區別？那些場景適用？
答：MVVM和MVC都是一種設計思想，主要就是MVC中的Controller演變成ViewModel,，MVVM主要通過數據來顯示視圖層而不是操作節點，解決了MVC中大量的DOM操作使頁面渲染性能降低，加載速度慢，影響用戶體驗問題。主要用于數據操作比較多的場景。
場景：數據操作比較多的場景，更加便捷

6、Vue公司的雙向數據綁定原理是什么？
答：vue.js是采用數據劫持結合發布者 - 訂閱者模式的方式，通過Object.defineProperty（）來劫持各個屬性的setter，getter，在數據變動時發布消息給訂閱者，觸發相應的監聽回調。

7、請說下封裝vue組件的過程？
答：首先，組件可以提升整個項目的開發效率能夠把頁面抽象成多個相對獨立的模塊，解決了我們傳統項目開發：效率低，難維護，復用性等問題。

然后，使用Vue.extend方法創建一個組件，然后使用Vue.component方法注冊組件。子組件需要數據，可以在道具中接受定義。而子組件修改好數據后，想把數據傳遞給父組件。可以采用發射方法

8、聊聊你對Vue.js的模板編譯的理解
答：簡而言之，就是先轉化成AST樹，再得到的渲染函數返回VNODE（Vue公司的虛擬DOM節點）
詳情步驟：

首先，通過編譯編譯器把模板編譯成AST語法樹（抽象語法樹即源代碼的抽象語法結構的樹狀表現形式），編譯是createCompiler的返回值，createCompiler是用以創建編譯器的。負責合并選項。

然后，AST會經過生成（將AST語法樹轉化成渲染功能字符串的過程）得到渲染函數，渲染的返回值是VNode，VNode是Vue的虛擬DOM節點，里面有（標簽名，子節點，文本等等）

9、<keep-alive></keep-alive>的作用是什么，如何使用？
答：包裹動態組件時，會緩存不活動的組件實例，主要用于保留組件狀態或避免重新渲染；
使用：簡單頁面時
緩存：  <keep-alive include=”組件名”></keep-alive>
不緩存：<keep-alive exclude=”組件名”></keep-alive>

10、vue和react區別
答：相同點：都鼓勵組件化，都有’props’的概念，都有自己的構建工具，Reat與Vue只有框架的骨架，其他的功能如路由、狀態管理等是框架分離的組件。

不同點：React：數據流單向，語法—JSX，在React中你需要使用setState()方法去更新狀態。Vue：數據雙向綁定，語法--HTML，state對象并不是必須的，數據由data屬性在Vue對象中進行管理。適用于小型應用，但對于對于大型應用而言不太適合。

11、v-show和v-if指令的共同點和不同點?
v-show指令是通過修改元素的displayCSS屬性讓其顯示或者隱藏。
v-if指令是直接銷毀和重建DOM達到讓元素顯示和隱藏的效果。

12、$route和$router的區別
答：$route是“路由信息對象”，包括path，params，hash，query，fullPath，matched，name等路由信息參數。而$router是“路由實例”對象包括了路由的跳轉方法，鉤子函數等

13、vue中 key 值的作用
答：當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認用“就地復用”策略。如果數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序， 而是簡單復用此處每個元素，并且確保它在特定索引下顯示已被渲染過的每個元素。key的作用主要是為了高效的更新虛擬DOM

感謝你能夠認真閱讀完這篇文章，希望小編分享vue面試題的示例及解答方法內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!