Vue 筆試題彙總

本人工做兩年，工做跳槽。

今天面試遇到筆試題，發現一道題也沒有答上來，特在此對Vue的面試題進行一個彙總，資料來源：網絡收集 , 本人面試收集。

感謝如下連接的做者：

連接：https://www.jianshu.com/p/c2da05a708b2 
連接：https://blog.csdn.net/snshl9db69ccu1aikl9r/article/details/90652219
連接：https://segmentfault.com/a/1190000016434836?utm_source=tag-newest#articleHeader1
連接：https://blog.csdn.net/weixin_39068791/article/details/81363670
連接：https://www.jianshu.com/p/b1dd80f4d542
連接：https://www.cnblogs.com/fozero/p/10863667.html
連接：https://segmentfault.com/a/1190000016344599?utm_source=tag-newest

概念經驗篇

1. 什麼是 MVVM？

    MVVM 是 Model-View-ViewModel 的縮寫。MVVM 是一種設計思想。Model 層表明數據模型，也能夠在 Model 中定義數據修改和操做的業務邏輯；View 表明 UI 組件，它負責將數據模型轉化成 UI 展示出來，ViewModel 是一個同步 View 和 Model 的對象。

在 MVVM 架構下，View 和 Model 之間並無直接的聯繫，而是經過 ViewModel 進行交互。

我的理解:

1. ViewModel 其實就是咱們建立的Vue實例new Vue({  })  （ 咱們一般在這裏面寫代碼） 。
2. Model (數據模型層) 其實就是咱們寫在HTML中的變量(  v-html='data' ,這裏的data就是數據模型 )
3. View( 視圖層，即表現層 ) 其實就是咱們寫的佈局,只包含HTML+CSS樣式。
4. 咱們寫好佈局(HTML+CSS)(View層)，在HTML代碼中寫Vue實例中的data 定義的變量(Model層)，而後在ViewModel寫業務邏輯，咱們對數據操做徹底在ViewModel完成。

2. MVVM 和 MVC 區別？

MVC和 MVVM  都是一種設計思想。主要就是 MVC 中 Controller 演變成 MVVM 中的 ViewModel。MVVM 主要解決了 MVC 中大量的 DOM 操做使頁面渲染性能下降，加載速度變慢，影響用戶體驗。和當 Model 頻繁發生變化，開發者須要主動更新到 View 。

3. Vue 的優勢是什麼？

低耦合、可重用性、獨立開發、可組件化。

1. 低耦合 : 就是寫一個組件，在任何複雜的項目，任何複雜的場景下，均可以即拿 即用。
2. 可重用性 : 你能夠把一些視圖邏輯放在一個 ViewModel 裏面，讓不少 View 重用這段視圖邏輯。
3. 獨立開發 : 開發人員能夠專一於業務邏輯和數據的開發（ViewModel），設計人員能夠專一於頁面設計( UI )。
4. 可組件化：可將視圖某個部分提取出來做爲一個單獨的組件，單獨書寫業務邏輯(ViewModel)。

4. Vue配置選項?

el: 最外層元素選擇器 : '#app'
    props: 聲明接收父組件哪些屬性。
    data: 狀態數據 （）{return{}}
    computed: 計算屬性:{}
    methods: 事件回調函數{}
    watch: 監視屬性變化{fun}
    directives: 註冊局部指令Vue.directive('my-directive', function(el, binding){
            el.innerHTML = binding.value.toupperCase()
    })
    filters: 註冊局部過濾器 vue.filter()
    components: 局部註冊組件

directives : {
            'my-directive' : function (el, binding) {
                        el.innerHTML = binding.value.toupperCase()
               }
        }

5. Vue生命週期的理解( Vue 實例從建立到銷燬的過程 )？

詳情：http://www.javashuo.com/article/p-wkvksxjl-hm.html。

總共分爲 8 個階段建立前/後，載入前/後，更新前/後，銷燬前/後。

1. 建立前(beforeCreate)：  
2. 建立後(created)：  
3. 載入前(beforeMount)：  
4. 載入後(mounted)：  
5. 更新前(beforeUpdate) :  
6. 更新後(updated)： 
7. 銷燬前/後 (beforeDestroy/destroy) ：在執行 destroy 方法後，對 data 的改變不會再觸發周期函數，說明此時 vue 實例已經解除了事件監聽以及和 dom 的綁定，可是 dom 結構依然存在  。

第一次頁面加載會觸發哪幾個鉤子

    beforeCreate, created, beforeMount, mounted 這四個鉤子。

經常使用的生命週期函數。

1. created  
2. mounted  
3. activated: keep-alive組件激活時調用。

6. 簡單描述每一個週期具體適合哪些場景

1. beforecreate : 能夠在這加個loading事件，在加載實例時觸發。

2. created : 初始化完成時的事件寫在這裏，如在這結束loading事件，異步請求也適宜在這裏調用

3. mounted : 掛載元素，獲取到DOM節點
4. updated : 若是對數據統一處理，在這裏寫上相應函數
5. beforeDestroy : 能夠作一個確認中止事件的確認框
6. nextTick : 更新數據後當即操做dom

7.對nextTick的理解

     實際上,Vue的修改數據是到更新視圖是異步的。Vue 在修改數據後，視圖不會馬上更新，而是等同一事件循環中的全部數據變化完成以後，再統一進行視圖更新。這時候就要用nextTick監聽視圖已經更新了,能夠對更新好的視圖進行操做。

使用場景:

    一、點擊按鈕顯示本來以 v-show = false 隱藏起來的輸入框，並獲取焦點。

showsou(){
      this.showit = true //修改 v-show
      document.getElementById("keywords").focus()  //在第一個 tick 裏，獲取不到輸入框，天然也獲取不到焦點
  }

showsou(){
     this.showit = true
     this.$nextTick(function () {
      // DOM 更新了
        document.getElementById("keywords").focus()
     })
   }

    二、使用 swiper 插件經過 ajax 請求圖片後的滑動問題。

 

8.怎麼定義vue-router的動態路由以及如何獲取傳過來的動態參數？

1.     在router目錄下的index.js文件中，對path屬性加上/:id。
2.     使用router對象的params.id。

9.v-show和v-if指令的共同點和不一樣點。

    共同點:

    1.二者都是用來控制 DOM元素在View層的顯示/隱藏。

    不一樣點 :

1. v-show指令是經過修改元素的display的CSS屬性讓其顯示或者隱藏。
2. v-if指令是直接銷燬和重建DOM達到讓元素顯示和隱藏的效果。

10.爲何避免 v-if 和 v-for 用在一塊兒

    當 Vue 處理指令時，v-for 比 v-if 具備更高的優先級，經過v-if 移動到容器元素，不會再重複遍歷列表中的每一個值。取而代之的是，咱們只檢查它一次，且不會在 v-if 爲否的時候運算 v-for。 

11.自定義指令(v-check, v-focus) 的方法有哪些? 它有哪些鉤子函數? 還有哪些鉤子函數參數。

• 全局定義指令：在 vue 對象的 directive 方法裏面有兩個參數, 一個是指令名稱, 另外一個是函數。

• 組件內定義指令：directives鉤子函數: bind(綁定事件出發)、inserted(節點插入時候觸發)、update(組件內相關更新)

• 鉤子函數參數： el、binding

11.路由之間跳轉？

方式一：

1. router.push('index')
2. 組件中使用 : this.$router.push('index')

方式二：

1. <router-link :to="{ path: '/home' }">Home</router-link>

2. <router-link :to="{ name: 'Home'}">User</router-link>

12.路由按需加載

    component:  resolve => require(['@/components/home/home'],resolve)

12.vuex 是什麼？怎麼使用？哪一種功能場景使用它？

Vue 框架中狀態管理。

步驟：

1. 新建了一個目錄 store， export 。
2. 在 main.js 引入 store，注入。

使用場景：

單頁應用中，組件之間的狀態。如：音樂播放、登陸狀態、加入購物車。

13.vue-router 有哪幾種導航鉤子?

三種

• 全局導航鉤子
  router.beforeEach(to, from, next),
  router.beforeResolve(to, from, next),
  router.afterEach(to, from ,next)

• 組件內鉤子
  beforeRouteEnter,
  beforeRouteUpdate,
  beforeRouteLeave

• 單獨路由獨享組件
  beforeEnter

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

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

15.雙向數據綁定實現（待）

16.vuex 有哪幾種屬性。

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

1. state => 基本數據
2. getters => 從基本數據派生的數據
3. mutations => 提交更改數據的方法，同步！
4. actions => 像一個裝飾器，包裹mutations，使之能夠異步。
5. modules => 模塊化Vuex

17.Vuex 的 store 特性是什麼(即:是什麼，有什麼用？待連接)

Vuex 就是一個倉庫，倉庫裏放了不少對象。其中 state 就是數據源存放地， Vue 組件從 store 讀取數據，如果 store 中的數據發生改變，依賴這項數據的組件也會發生更新它經過 mapState 把全局的 state 和 getters 映射到當前組件的 computed 計算屬性。

18.Vuex 的 mutation 特性是什麼（即:是什麼，有什麼用？）

action 相似於 muation, 不一樣在於 : action 提交的是 mutation,而不是直接變動狀態action 能夠包含任意異步操做。

19.Vue 中 ajax 請求代碼應該寫在組件的 methods 中仍是 vuex 的 action 中。

若是請求來的數據不是要被其餘組件公用，僅僅在請求的組件內使用，就不須要放入 vuex 的 action 裏。

若是被其餘地方複用，請將請求放入 action 裏，方便複用，幷包裝成 promise 返回。

20.vuex 原理

vuex 僅僅是做爲 vue 的一個插件而存在，不像 Redux,MobX 等庫能夠應用於全部框架，vuex 只能使用在 vue 上，很大的程度是由於其高度依賴於 vue 的 computed 依賴檢測系統以及其插件系統，vuex 總體思想誕生於 flux,可其的實現方式完徹底全的使用了 vue 自身的響應式設計，依賴監聽、依賴收集都屬於 vue 對對象 Property set get 方法的代理劫持。

最後一句話結束 vuex 工做原理，vuex 中的 store 本質就是沒有 template 的隱藏着的 vue 組件。

單句篇

21.css只在當前組件起做用

    在style標籤中寫入scoped便可 例如：<style scoped></style>

22.v-if 和 v-show 區別

    v-if按照條件是否渲染/銷燬DOM，v-show用display的block或none控制顯示/隱藏。

23.$route和$router的區別

    $route是「路由信息對象」，包括path，params，hash，query，fullPath，matched，name等路由信息參數。而$router是「路由實例」對象包括了路由的跳轉方法，鉤子函數等。

24.vue.js的兩個核心是什麼？

    數據驅動、組件系統。

25.vue幾種經常使用的指令

    v-for 、 v-if 、v-bind、v-on、v-show、v-else

26.vue經常使用的修飾符？

    prevent: 提交事件再也不重載頁面；.stop: 阻止單擊事件冒泡；.self: 當事件發生在該元素自己而不是子元素的時候會觸發；.capture: 事件偵聽，事件發生的時候會調用。

27.v-on 能夠綁定多個方法嗎？

    能夠。

28.Vue中 key 值的做用？

    當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認用「就地複用」策略。若是數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序， 而是簡單複用此處每一個元素，而且確保它在特定索引下顯示已被渲染過的每一個元素。key的做用主要是爲了高效的更新虛擬DOM。

29.什麼是Vue的計算屬性？

    在模板中放入太多的邏輯會讓模板太重且難以維護，在須要對數據進行復雜處理，且可能屢次使用的狀況下，儘可能採起計算屬性的方式。好處：①使得數據處理結構清晰；②依賴於數據，數據更新，處理結果自動更新；③計算屬性內部this指向vm實例；④在template調用時，直接寫計算屬性名便可；⑤經常使用的是getter方法，獲取數據，也可使用set方法改變數據；⑥相較於methods，無論依賴的數據變不變，methods都會從新計算，可是依賴數據不變的時候computed從緩存中獲取，不會從新計算。

30.vue等單頁面應用及其優缺點

1. 優勢：Vue 的目標是經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件，核心是一個響應的數據綁定系統。MVVM、數據驅動、組件化、輕量、簡潔、高效、快速、模塊友好。

2. 缺點：不支持低版本的瀏覽器，最低只支持到IE9；不利於SEO的優化（若是要支持SEO，建議經過服務端來進行渲染組件）；第一次加載首頁耗時相對長一些；不可使用瀏覽器的導航按鈕須要自行實現前進、後退。

31.怎麼定義 vue-router 的動態路由? 怎麼獲取傳過來的值

    在 router 目錄下的 index.js 文件中，對 path 屬性加上 /:id，使用 router 對象的 params.id 獲取。

 

美團試題篇

32. 使用 Vuex 只需執行 Vue.use(Vuex)，並在 Vue 的配置中傳入一個 store 對象的示例，store 是如何實現注入的？

Vue.use(Vuex) 方法執行的是 install 方法。它實現了 Vue 實例對象的 init 方法封裝和注入，使傳入的 store 對象被設置到 Vue 上下文環境的store中。所以在VueComponent任意地方都可以經過this.$store 訪問到該 store。

33. state 內部支持模塊配置和模塊嵌套，如何實現的？

在 store 構造方法中有 makeLocalContext 方法，全部 module 都會有一個 local context，根據配置時的 path 進行匹配。

因此執行如 dispatch('submitOrder', payload)這類 action 時，默認的拿到都是 module 的 local state，若是要訪問最外層或者是其餘 module 的 state，只能從 rootState 按照 path 路徑逐步進行訪問。

34. 在執行 dispatch 觸發 action(commit 同理)的時候，只需傳入(type, payload)，action 執行函數中第一個參數 store 從哪裏獲取的？

store 初始化時，全部配置的 action 和 mutation 以及 getters 均被封裝過。在執行如 dispatch('submitOrder', payload)的時候，actions 中 type 爲 submitOrder 的全部處理方法都是被封裝後的，其第一個參數爲當前的 store 對象，因此可以獲取到 { dispatch, commit, state, rootState } 等數據。

35. Vuex 如何區分 state 是外部直接修改，仍是經過 mutation 方法修改的？

Vuex 中修改 state 的惟一渠道就是執行 commit('xx', payload) 方法，其底層經過執行 this._withCommit(fn) 設置_committing 標誌變量爲 true，而後才能修改 state，修改完畢還須要還原_committing 變量。外部修改雖然可以直接修改 state，可是並無修改_committing 標誌位，因此只要 watch 一下 state，state change 時判斷是否_committing 值爲 true，便可判斷修改的合法性。

36. 調試時的"時空穿梭"功能是如何實現的？

devtoolPlugin 中提供了此功能。由於 dev 模式下全部的 state change 都會被記錄下來，'時空穿梭' 功能其實就是將當前的 state 替換爲記錄中某個時刻的 state 狀態，利用 store.replaceState(targetState) 方法將執行 this._vm.state = state 實現。