Vue.js 面試寶典

Vue.js 面試寶典
轉眼又到了每一年就業的黃金時期，各位想要跳槽，想找工做的小夥伴已經開始複習各類面試時須要知識了。今天就給你們總結一下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區別？它和其它框架（jquery）的區別是什麼？哪些場景適合？
mvc和mvvm其實區別並不大。都是一種設計思想。主要就是mvc中Controller演變成mvvm中的viewModel。mvvm主要解決了mvc中大量的DOM 操做使頁面渲染性能下降，加載速度變慢，影響用戶體驗。
區別：vue數據驅動，經過數據來顯示視圖層而不是節點操做。
場景：數據操做比較多的場景，更加便捷
3、vue的優勢是什麼？
· 低耦合。視圖（View）能夠獨立於Model變化和修改，一個ViewModel能夠綁定到不一樣的"View"上，當View變化的時候Model能夠不變，當Model變化的時候View也能夠不變。
· 可重用性。你能夠把一些視圖邏輯放在一個ViewModel裏面，讓不少view重用這段視圖邏輯。
· 獨立開發。開發人員能夠專一於業務邏輯和數據的開發（ViewModel），設計人員能夠專一於頁面設計。
· 可測試。界面素來是比較難於測試的，而如今測試能夠針對ViewModel來寫。
4、組件之間的傳值？
· 父組件與子組件傳值
父組件經過標籤上面定義傳值 ：eg=‘data’ 父組件中 data(){return {data:‘egdata’}}
子組件經過props方法接受數據 props:[‘eg’] 在 props 中添加了元素以後，就不須要在 data 中再添加變量了
· 子組件向父組件傳遞數據
子組件經過emit方法傳遞參數子組件部分:​​​​父組件部分：​​​​子組件向子組件傳遞數據Vue沒有直接子對子傳參的方法，建議將須要傳遞數據的子組件，都合併爲一個組件。若是必定須要子對子傳參，能夠先從傳到父組件，再傳到子組件。爲了便於開發，Vue推出了一個狀態管理工具Vuex，能夠很方便實現組件之間的參數傳遞。5、路由之間跳轉聲明式（標籤跳轉）編程式（js跳轉）1.直接修改地址欄中的路由地址②經過router−link實現跳轉​​③經過js的編程的方式​​6、vue.cli中怎樣使用自定義的組件？有遇到過哪些問題嗎？⋅第一步：在components目錄新建你的組件文件（如：indexPage.vue），script必定要exportdefault⋅第二步：在須要用的頁面（組件）中導入：importindexPagefrom′@/components/indexPage.vue′⋅第三步：注入到vue的子組件的components屬性上面,components:indexPage⋅第四步：在template視圖view中使用，例若有indexPage命名，使用的時候則index−page7、vuex有哪幾種屬性？有五種，分別是State、Getter、Mutation、Action、Module⋅vuex的State特性A、Vuex就是一個倉庫，倉庫裏面放了不少對象。其中state就是數據源存放地，對應於通常Vue對象裏面的dataB、state裏面存放的數據是響應式的，Vue組件從store中讀取數據，如果store中的數據發生改變，依賴這個數據的組件也會發生更新C、它經過mapState把全局的state和getters映射到當前組件的computed計算屬性中⋅vuex的Getter特性A、getters能夠對State進行計算操做，它就是Store的計算屬性B、雖然在組件內也能夠作計算屬性，可是getters能夠在多組件之間複用C、若是一個狀態只在一個組件內使用，是能夠不用getters⋅vuex的Mutation特性Action相似於mutation，不一樣在於：Action提交的是mutation，而不是直接變動狀態；Action能夠包含任意異步操做。8、不用Vuex會帶來什麼問題？⋅可維護性會降低，想修改數據要維護三個地方；⋅可讀性會降低，由於一個組件裏的數據，根本就看不出來是從哪來的；⋅增長耦合，大量的上傳派發，會讓耦合性大大增長，原本Vue用Component就是爲了減小耦合，如今這麼用，和組件化的初衷相背。9、生命週期相關面試題總共分爲8個階段建立前/後，載入前/後，更新前/後，銷燬前/後。⋅建立前/後：在beforeCreate階段，vue實例的掛載元素el和數據對象data都爲undefined，還未初始化。在created階段，vue實例的數據對象data有了，el尚未。⋅載入前/後：在beforeMount階段，vue實例的 emit方法傳遞參數子組件部分:​​​​父組件部分：​​​​子組件向子組件傳遞數據Vue 沒有直接子對子傳參的方法，建議將須要傳遞數據的子組件，都合併爲一個組件。若是必定須要子對子傳參，能夠先從傳到父組件，再傳到子組件。爲了便於開發，Vue 推出了一個狀態管理工具Vuex，能夠很方便實現組件之間的參數傳遞。5、路由之間跳轉聲明式（標籤跳轉） 編程式（ js跳轉）1.直接修改地址欄中的路由地址 ②經過router-link實現跳轉​​③經過js的編程的方式​​6、vue.cli中怎樣使用自定義的組件？有遇到過哪些問題嗎？· 第一步：在components目錄新建你的組件文件（如：indexPage.vue），script必定要export default {}· 第二步：在須要用的頁面（組件）中導入：import indexPage from '@/components/indexPage.vue'· 第三步：注入到vue的子組件的components屬性上面,components:{indexPage}· 第四步：在template視圖view中使用，例若有indexPage命名，使用的時候則index-page7、vuex有哪幾種屬性？有五種，分別是 State、 Getter、Mutation 、Action、 Module· vuex的State特性A、Vuex就是一個倉庫，倉庫裏面放了不少對象。其中state就是數據源存放地，對應於通常Vue對象裏面的dataB、state裏面存放的數據是響應式的，Vue組件從store中讀取數據，如果store中的數據發生改變，依賴這個數據的組件也會發生更新C、它經過mapState把全局的 state 和 getters 映射到當前組件的 computed 計算屬性中· vuex的Getter特性A、getters 能夠對State進行計算操做，它就是Store的計算屬性B、 雖然在組件內也能夠作計算屬性，可是getters 能夠在多組件之間複用C、 若是一個狀態只在一個組件內使用，是能夠不用getters· vuex的Mutation特性Action 相似於 mutation，不一樣在於：Action 提交的是 mutation，而不是直接變動狀態；Action 能夠包含任意異步操做。8、不用Vuex會帶來什麼問題？· 可維護性會降低，想修改數據要維護三個地方；· 可讀性會降低，由於一個組件裏的數據，根本就看不出來是從哪來的；· 增長耦合，大量的上傳派發，會讓耦合性大大增長，原本Vue用Component就是爲了減小耦合，如今這麼用，和組件化的初衷相背。9、生命週期相關面試題總共分爲8個階段建立前/後，載入前/後，更新前/後，銷燬前/後。· 建立前/後： 在beforeCreate階段，vue實例的掛載元素el和數據對象data都爲undefined，還未初始化。在created階段，vue實例的數據對象data有了，el尚未。· 載入前/後：在beforeMount階段，vue實例的emit方法傳遞參數子組件部分:​​​​父組件部分：​​​​子組件向子組件傳遞數據Vue沒有直接子對子傳參的方法，建議將須要傳遞數據的子組件，都合併爲一個組件。若是必定須要子對子傳參，能夠先從傳到父組件，再傳到子組件。爲了便於開發，Vue推出了一個狀態管理工具Vuex，能夠很方便實現組件之間的參數傳遞。5、路由之間跳轉聲明式（標籤跳轉）編程式（js跳轉）1.直接修改地址欄中的路由地址②經過router−link實現跳轉​​③經過js的編程的方式​​6、vue.cli中怎樣使用自定義的組件？有遇到過哪些問題嗎？⋅第一步：在components目錄新建你的組件文件（如：indexPage.vue），script必定要exportdefault⋅第二步：在須要用的頁面（組件）中導入：importindexPagefrom
′
@/components/indexPage.vue
′
⋅第三步：注入到vue的子組件的components屬性上面,components:indexPage⋅第四步：在template視圖view中使用，例若有indexPage命名，使用的時候則index−page7、vuex有哪幾種屬性？有五種，分別是State、Getter、Mutation、Action、Module⋅vuex的State特性A、Vuex就是一個倉庫，倉庫裏面放了不少對象。其中state就是數據源存放地，對應於通常Vue對象裏面的dataB、state裏面存放的數據是響應式的，Vue組件從store中讀取數據，如果store中的數據發生改變，依賴這個數據的組件也會發生更新C、它經過mapState把全局的state和getters映射到當前組件的computed計算屬性中⋅vuex的Getter特性A、getters能夠對State進行計算操做，它就是Store的計算屬性B、雖然在組件內也能夠作計算屬性，可是getters能夠在多組件之間複用C、若是一個狀態只在一個組件內使用，是能夠不用getters⋅vuex的Mutation特性Action相似於mutation，不一樣在於：Action提交的是mutation，而不是直接變動狀態；Action能夠包含任意異步操做。8、不用Vuex會帶來什麼問題？⋅可維護性會降低，想修改數據要維護三個地方；⋅可讀性會降低，由於一個組件裏的數據，根本就看不出來是從哪來的；⋅增長耦合，大量的上傳派發，會讓耦合性大大增長，原本Vue用Component就是爲了減小耦合，如今這麼用，和組件化的初衷相背。9、生命週期相關面試題總共分爲8個階段建立前/後，載入前/後，更新前/後，銷燬前/後。⋅建立前/後：在beforeCreate階段，vue實例的掛載元素el和數據對象data都爲undefined，還未初始化。在created階段，vue實例的數據對象data有了，el尚未。⋅載入前/後：在beforeMount階段，vue實例的el和data都初始化了，但仍是掛載以前爲虛擬的dom節點，data.message還未替換。在mounted階段，vue實例掛載完成，data.message成功渲染。
· 更新前/後：當data變化時，會觸發beforeUpdate和updated方法。
· 銷燬前/後：在執行destroy方法後，對data的改變不會再觸發周期函數，說明此時vue實例已經解除了事件監聽以及和dom的綁定，可是dom結構依然存在
（1）、什麼是vue生命週期
答： Vue 實例從建立到銷燬的過程，就是生命週期。也就是從開始建立、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，咱們稱這是 Vue 的生命週期。
（2）、vue生命週期的做用是什麼
答：它的生命週期中有多個事件鉤子，讓咱們在控制整個Vue實例的過程時更容易造成好的邏輯。

（3）、第一次頁面加載會觸發哪幾個鉤子
答：第一次頁面加載時會觸發 beforeCreate, created, beforeMount, mounted 這幾個鉤子
（4）、DOM 渲染在哪一個週期中就已經完成
答：DOM 渲染在 mounted 中就已經完成了。
（5）、簡單描述每一個週期具體適合哪些場景
答：生命週期鉤子的一些使用方法：
· beforecreate : 能夠在這加個loading事件，在加載實例時觸發
· created : 初始化完成時的事件寫在這裏，如在這結束loading事件，異步請求也適宜在這裏調用
· mounted : 掛載元素，獲取到DOM節點
· updated : 若是對數據統一處理，在這裏寫上相應函數
· beforeDestroy : 能夠作一個確認中止事件的確認框
· nextTick : 更新數據後當即操做dom
10、Vue的雙向數據綁定原理是什麼？
答：vue.js 是採用數據劫持結合發佈者-訂閱者模式的方式，經過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發相應的監聽回調。
具體步驟：
第一步：須要observe的數據對象進行遞歸遍歷，包括子屬性對象的屬性，都加上 setter和getter
這樣的話，給這個對象的某個值賦值，就會觸發setter，那麼就能監聽到了數據變化
第二步：compile解析模板指令，將模板中的變量替換成數據，而後初始化渲染頁面視圖，並將每一個指令對應的節點綁定更新函數，添加監聽數據的訂閱者，一旦數據有變更，收到通知，更新視圖
第三步：Watcher訂閱者是Observer和Compile之間通訊的橋樑，主要作的事情是:
一、在自身實例化時往屬性訂閱器(dep)裏面添加本身
二、自身必須有一個update()方法
三、待屬性變更dep.notice()通知時，能調用自身的update()方法，並觸發Compile中綁定的回調，則功成身退。