摘要：面試的時(shí)候，相關(guān)技術(shù)原理也一定是必考點(diǎn)。好了，進(jìn)入正題，今天在這里給大家?guī)硪稽c(diǎn)的進(jìn)階面試題。指令是直接銷毀和重建達(dá)到讓元素顯示和隱藏的效果。

Vue 越來越受歡迎了。放眼國(guó)內(nèi)外，不管是 BAT 等大廠，還是創(chuàng)業(yè)公司，Vue 都有廣泛的應(yīng)用。面試的時(shí)候，Vue 相關(guān)技術(shù)原理也一定是必考點(diǎn)?？梢哉f，對(duì)于任何一個(gè)前端工程師來說，掌握 Vue 可能不是一個(gè)可選項(xiàng)，而更像一門“必修課”。

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

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

好了，進(jìn)入正題，今天在這里給大家?guī)硪稽c(diǎn)vue的進(jìn)階面試題。

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

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

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

4、vuex是什么？怎么使用？哪種功能場(chǎng)景使用它？
答：vue框架中狀態(tài)管理。在main.js引入store，注入。新建了一個(gè)目錄store，….. export 。場(chǎng)景有：?jiǎn)雾搼?yīng)用中，組件之間的狀態(tài)。音樂播放、登錄狀態(tài)、加入購(gòu)物車

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

6、Vue公司的雙向數(shù)據(jù)綁定原理是什么？
答：vue.js是采用數(shù)據(jù)劫持結(jié)合發(fā)布者 - 訂閱者模式的方式，通過Object.defineProperty（）來劫持各個(gè)屬性的setter，getter，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。

7、請(qǐng)說下封裝vue組件的過程？
答：首先，組件可以提升整個(gè)項(xiàng)目的開發(fā)效率能夠把頁面抽象成多個(gè)相對(duì)獨(dú)立的模塊，解決了我們傳統(tǒng)項(xiàng)目開發(fā)：效率低，難維護(hù)，復(fù)用性等問題。

然后，使用Vue.extend方法創(chuàng)建一個(gè)組件，然后使用Vue.component方法注冊(cè)組件。子組件需要數(shù)據(jù)，可以在道具中接受定義。而子組件修改好數(shù)據(jù)后，想把數(shù)據(jù)傳遞給父組件?？梢圆捎冒l(fā)射方法

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

首先，通過編譯編譯器把模板編譯成AST語法樹（抽象語法樹即源代碼的抽象語法結(jié)構(gòu)的樹狀表現(xiàn)形式），編譯是createCompiler的返回值，createCompiler是用以創(chuàng)建編譯器的。負(fù)責(zé)合并選項(xiàng)。

然后，AST會(huì)經(jīng)過生成（將AST語法樹轉(zhuǎn)化成渲染功能字符串的過程）得到渲染函數(shù)，渲染的返回值是VNode，VNode是Vue的虛擬DOM節(jié)點(diǎn)，里面有（標(biāo)簽名，子節(jié)點(diǎn)，文本等等）

9、的作用是什么，如何使用？
答：包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例，主要用于保留組件狀態(tài)或避免重新渲染；
使用：簡(jiǎn)單頁面時(shí)
緩存：
不緩存：

10、vue和react區(qū)別
答：相同點(diǎn)：都鼓勵(lì)組件化，都有’props’的概念，都有自己的構(gòu)建工具，Reat與Vue只有框架的骨架，其他的功能如路由、狀態(tài)管理等是框架分離的組件。

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

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

12、$route和$router的區(qū)別
答：$route是“路由信息對(duì)象”，包括path，params，hash，query，fullPath，matched，name等路由信息參數(shù)。而$router是“路由實(shí)例”對(duì)象包括了路由的跳轉(zhuǎn)方法，鉤子函數(shù)等

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

另外給大家歡迎關(guān)注我的公眾號(hào)：bb妞，里面有很多前端干貨與你共享。