vue進階面試題

Vue 愈來愈受歡迎了。放眼國內外，不論是 BAT 等大廠，仍是創業公司，Vue 都有普遍的應用。面試的時候，Vue 相關技術原理也必定是必考點。能夠說，對於任何一個前端工程師來講，掌握 Vue 可能不是一個可選項，而更像一門「必修課」。

不少人作vue項目都是直接element ui等UI框架直接上，這些框架雖然在效率上幫了咱們不少，可是，對於咱們的技術提高而言，其實沒有任何的提高，而對於面試官提問的vue核心技術，你也確定回答不上來。

對於一位開發者來講，若是你對一個技術框架歷來都是隻停留在會用上，而歷來不去了解這個框架裏面核心技術的實現原理和背後的設計思想，我想在技術這條路上確定走不遠，我本身做爲開發者我有很是深入的體會.在這裏也給你們作個走心的推薦，ant Design vue這個ui框架的做者在極客時間推出了一門課，叫vue開發實戰（文章底部有購買連接）。我本身也購買了這門課，以爲講的不錯，會帶着你掌握 Vue 的技術原理及其應用， 也會對其底層原理有所瞭解，而且經過實戰項目，你將具有獨立負責 Vue 前端項目的能力，對你的跳槽和麪試以及vue的入門將會有很是大的幫助，不少購買者包括我本身也以爲這裏面乾貨滿滿。推薦給你們有須要的人。

好了，進入正題，今天在這裏給你們帶來一點vue的進階面試題。

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

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

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

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

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

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

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

而後，使用Vue.extend方法建立一個組件，而後使用Vue.component方法註冊組件。子組件須要數據，能夠在道具中接受定義。而子組件修改好數據後，想把數據傳遞給父組件。能夠採用發射方法

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

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

而後，AST會通過生成（將AST語法樹轉化成渲染功能字符串的過程）獲得渲染函數，渲染的返回值是VNode，VNode是Vue的虛擬DOM節點，裏面有（標籤名，子節點，文本等等）

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

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

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

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

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

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

另外給你們歡迎關注個人公衆號：bb妞，裏面有不少前端乾貨與你共享。