千鋒長沙前端培訓：Vue相關面試題

       如果你想問前端最值得學習的框架是什麼，我一定會毫不猶豫地告訴你是Vue。 無論你是技術小白還是前端工程師，Vue的重要性自不必多說。下面千鋒 給大家分享下Vue相關面試題：

       1、什麼是 mvvm？

       MVVM 是 Model-View-ViewModel 的縮寫。mvvm 是一種設計思想。Model 層代表資料模型，也可以在 Model 中定義資料修改和操作的業務邏輯；View 代表 UI 元件，它負責將資料模型轉化成 UI 展現出來，ViewModel 是一個同步 View 和 Model 的物件。 在 MVVM 架構下，View 和 Model 之間並沒有直接的聯絡，而是通過 ViewModel 進行互動，Model 和 ViewModel 之間的互動是雙向的， 因此 View 資料的變化會同步到 Model 中，而 Model 資料的變化也會立即反應到 View 上。 ViewModel 通過雙向資料繫結把 View 層和 Model 層連線了起來，而 View 和 Model 之間的同步工作完全是自動的，無需人為干涉，因此開發者只需關注業務邏輯，不需要手動操作 DOM, 不需要關注資料狀態的同步問題，複雜的資料狀態維護完全由 MVVM 來統一管理。

       2、mvvm 和 mvc 區別？

       mvc 和 mvvm 其實區別並不大。都是一種設計思想。主要就是 mvc 中 Controller 演變成 mvvm 中的 viewModel。mvvm 主要解決了 mvc 中大量的 DOM 操作使頁面渲染效能降低，載入速度變慢，影響使用者體驗。和當 Model 頻繁發生變化，開發者需要主動更新到 View 。

       3、vue 的優點是什麼？

       低耦合。檢視（View）可以獨立於 Model 變化和修改，一個 ViewModel 可以繫結到不同的"View"上，當 View 變化的時候 Model 可以不變，當 Model 變化的時候 View 也可以不變。 可重用性。你可以把一些檢視邏輯放在一個 ViewModel 裡面，讓很多 view 重用這段檢視邏輯。 獨立開發。開發人員可以專注於業務邏輯和資料的開發（ViewModel），設計人員可以專注於頁面設計，使用 Expression Blend 可以很容易設計介面並生成 xml 程式碼。 可測試。介面素來是比較難於測試的，而現在測試可以針對 ViewModel 來寫。

       4、vue生命週期的理解？

       答：總共分為 8 個階段建立前/後，載入前/後，更新前/後，銷燬前/後。 建立前/後： 在 beforeCreate 階段，vue 例項的掛載元素 el 還沒有。 載入前/後：在 beforeMount 階段，vue 例項的$el 和 data 都初始化了，但還是掛載之前為虛擬的 dom 節點，data.message 還未替換。在 mounted 階段，vue 例項掛載完成，data.message 成功渲染。 更新前/後：當 data 變化時，會觸發 beforeUpdate 和 updated 方法。 銷燬前/後：在執行 destroy 方法後，對 data 的改變不會再觸發周期函式，說明此時 vue 例項已經解除了事件監聽以及和 dom 的繫結，但是 dom 結構依然存在

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

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

       6、說出至少 4 種 vue 當中的指令和它的用法

       v-if(判斷是否隱藏)、v-for(把資料遍歷出來)、v-bind(繫結屬性)、v-model(實現雙向繫結)

       7、vue 的雙向繫結的原理是什麼？

       vue.js 是採用資料劫持結合釋出者-訂閱者模式的方式，通過 Object.defineProperty()來劫持各個屬性的 setter，getter，在資料變動時釋出訊息給訂閱者，觸發相應的監聽回撥。

       8、vuex 有哪幾種屬性

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

       9、vuex 的 store 特性是什麼

       vuex 就是一個倉庫，倉庫裡放了很多物件。其中 state 就是資料來源存放地，對應於一般 vue 物件裡面的 data。 state 裡面存放的資料是響應式的，vue 元件從 store 讀取資料，若是 store 中的資料發生改變，依賴這相資料的元件也會發生更新， 它通過 mapState 把全域性的 state 和 getters 對映到當前元件的 computed 計算屬性。

       10、vuex 的 getter 特性是什麼

       getter 可以對 state 進行計算操作，它就是 store 的計算屬性。 雖然在元件內也可以做計算屬性，但是 getters 可以在多給件之間複用， 如果一個狀態只在一個元件內使用，是可以不用 getters。

       11、vuex 的 mutation 特性是什麼

       action 類似於 muation, 不同在於：action 提交的是 mutation,而不是直接變更狀態。