如果你想問前端最值得學(xué)習(xí)的框架是什么，我一定會(huì)毫不猶豫地告訴你是Vue。無論你是技術(shù)小白還是前端工程師，Vue的重要性自不必多說。下面千鋒長沙前端培訓(xùn)給大家分享下Vue相關(guān)面試題：

       1、什么是 mvvm？

       MVVM 是 Model-View-ViewModel 的縮寫。mvvm 是一種設(shè)計(jì)思想。Model 層代表數(shù)據(jù)模型，也可以在 Model 中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯；View 代表 UI 組件，它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化成 UI 展現(xiàn)出來，ViewModel 是一個(gè)同步 View 和 Model 的對象。在 MVVM 架構(gòu)下，View 和 Model 之間并沒有直接的聯(lián)系，而是通過 ViewModel 進(jìn)行交互，Model 和 ViewModel 之間的交互是雙向的， 因此 View 數(shù)據(jù)的變化會(huì)同步到 Model 中，而 Model 數(shù)據(jù)的變化也會(huì)立即反應(yīng)到 View 上。ViewModel 通過雙向數(shù)據(jù)綁定把 View 層和 Model 層連接了起來，而 View 和 Model 之間的同步工作完全是自動(dòng)的，無需人為干涉，因此開發(fā)者只需關(guān)注業(yè)務(wù)邏輯，不需要手動(dòng)操作 DOM, 不需要關(guān)注數(shù)據(jù)狀態(tài)的同步問題，復(fù)雜的數(shù)據(jù)狀態(tài)維護(hù)完全由 MVVM 來統(tǒng)一管理。

       2、mvvm 和 mvc 區(qū)別？

       mvc 和 mvvm 其實(shí)區(qū)別并不大。都是一種設(shè)計(jì)思想。主要就是 mvc 中 Controller 演變成 mvvm 中的 viewModel。mvvm 主要解決了 mvc 中大量的 DOM 操作使頁面渲染性能降低，加載速度變慢，影響用戶體驗(yàn)。和當(dāng) Model 頻繁發(fā)生變化，開發(fā)者需要主動(dòng)更新到 View 。

       3、vue 的優(yōu)點(diǎn)是什么？

       低耦合。視圖（View）可以獨(dú)立于 Model 變化和修改，一個(gè) ViewModel 可以綁定到不同的"View"上，當(dāng) View 變化的時(shí)候 Model 可以不變，當(dāng) Model 變化的時(shí)候 View 也可以不變。可重用性。你可以把一些視圖邏輯放在一個(gè) ViewModel 里面，讓很多 view 重用這段視圖邏輯。獨(dú)立開發(fā)。開發(fā)人員可以專注于業(yè)務(wù)邏輯和數(shù)據(jù)的開發(fā)（ViewModel），設(shè)計(jì)人員可以專注于頁面設(shè)計(jì)，使用 Expression Blend 可以很容易設(shè)計(jì)界面并生成 xml 代碼。可測試。界面素來是比較難于測試的，而現(xiàn)在測試可以針對 ViewModel 來寫。

       4、vue生命周期的理解？

       答：總共分為 8 個(gè)階段創(chuàng)建前/后，載入前/后，更新前/后，銷毀前/后。創(chuàng)建前/后： 在 beforeCreate 階段，vue 實(shí)例的掛載元素 el 還沒有。載入前/后：在 beforeMount 階段，vue 實(shí)例的$el 和 data 都初始化了，但還是掛載之前為虛擬的 dom 節(jié)點(diǎn)，data.message 還未替換。在 mounted 階段，vue 實(shí)例掛載完成，data.message 成功渲染。更新前/后：當(dāng) data 變化時(shí)，會(huì)觸發(fā) beforeUpdate 和 updated 方法。銷毀前/后：在執(zhí)行 destroy 方法后，對 data 的改變不會(huì)再觸發(fā)周期函數(shù)，說明此時(shí) vue 實(shí)例已經(jīng)解除了事件監(jiān)聽以及和 dom 的綁定，但是 dom 結(jié)構(gòu)依然存在

       5、vuex 是什么？怎么使用？哪種功能場景使用它？

       vue 框架中狀態(tài)管理。在 main.js 引入 store，注入。新建了一個(gè)目錄 store，….. export 。場景有：單頁應(yīng)用中，組件之間的狀態(tài)。音樂播放、登錄狀態(tài)、加入購物車

       6、說出至少 4 種 vue 當(dāng)中的指令和它的用法

       v-if(判斷是否隱藏)、v-for(把數(shù)據(jù)遍歷出來)、v-bind(綁定屬性)、v-model(實(shí)現(xiàn)雙向綁定)

       7、vue 的雙向綁定的原理是什么？

       vue.js 是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過 Object.defineProperty()來劫持各個(gè)屬性的 setter，getter，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。

       8、vuex 有哪幾種屬性

       有 5 種，分別是 state、getter、mutation、action、module。

       9、vuex 的 store 特性是什么

       vuex 就是一個(gè)倉庫，倉庫里放了很多對象。其中 state 就是數(shù)據(jù)源存放地，對應(yīng)于一般 vue 對象里面的 data。state 里面存放的數(shù)據(jù)是響應(yīng)式的，vue 組件從 store 讀取數(shù)據(jù)，若是 store 中的數(shù)據(jù)發(fā)生改變，依賴這相數(shù)據(jù)的組件也會(huì)發(fā)生更新，它通過 mapState 把全局的 state 和 getters 映射到當(dāng)前組件的 computed 計(jì)算屬性。

       10、vuex 的 getter 特性是什么

       getter 可以對 state 進(jìn)行計(jì)算操作，它就是 store 的計(jì)算屬性。雖然在組件內(nèi)也可以做計(jì)算屬性，但是 getters 可以在多給件之間復(fù)用，如果一個(gè)狀態(tài)只在一個(gè)組件內(nèi)使用，是可以不用 getters。

       11、vuex 的 mutation 特性是什么

       action 類似于 muation, 不同在于：action 提交的是 mutation,而不是直接變更狀態(tài)。

上一篇

長沙Java培訓(xùn)：高并發(fā)編程JUC包面試題及答案

下一篇

千鋒長沙前端培訓(xùn)分享之初級前端面試題整理