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、的作用是什麼，如何使用？
答案：包裹動態元件時，會快取不活動的元件實例，主要用於保留元件狀態或避免重新渲染；
使用：簡單頁面時
快取：  
不緩存：

################ 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######這篇文章到這裡就已經全部結束了，更多其他精彩內容可以關注PHP中文網的###JavaScript教程視頻###欄目！ #########相關推薦：######《###vue面試題###》、《###前端面試題###》#######

以上是vue面試題的介紹（附答案）的詳細內容。更多資訊請關注PHP中文網其他相關文章！