面試時面試官想要聽到什麼答案（關於一些vue的問題）

前言

本身也只是一個前端的小白，由於公司大佬都比較忙，面試這種事就落到了我這小白身上，第一次叫我去的時候我是百般拒絕的，由於本身仍是有自知之明的，可是別人實在抽不開身，沒辦法只能去了，他們開玩笑說就按你這水平來就好了，啥時候你問不住了就讓他來複試就行。
前先後後也面了一些人，加上本身面試時候整理的一些問題，寫了這篇文章，感謝撥冗翻閱拙做,敬請斧正。

下面進入正文，本文會列舉一些平時面試時問到的問題和答案，並說明我在當時問到這個問題時所指望對方的回答：

vue生命週期（鉤子函數）

問題

請說一下vue的生命週期函數（鉤子函數）。

問題描述

首先關於生命週期函數，通常個人第一個問題就是這個，我認爲是每一個使用vue的都要清楚的，若是這個問題答的問題很大其實我都不太想繼續往下進行了。
即便英語不標準（我就是不標準的人，並非說這是個問題）也要去把關鍵點說清楚，哪一個地方有ed哪一個地方沒有ed實際上是很關鍵的，或者能夠手寫下來，由於經常使用的就是created和mounted因此前4個能夠清楚的手寫出來並不難，後面4個不去詳細說明都沒事。（我本身工做中基本沒用事後面4個）
在哪一個週期可以首次拿到data數據和在哪一個週期可以首次拿到mounted中的dom元素，若是沒有說到這個問題，我通常會一直往下問，直到他說出來這兩個答案。

指望答案

beforeCreate、created（此時需說明能夠在created中首次拿到data中定義的數據）、beforeMount、mounted（此時需說明dom樹渲染結束，可訪問dom結構）、beforeUpdate、updated、beforeDestroy、destroyed

computed中的getter和setter

問題

說一下computed中的getter和setter。

問題描述

不少狀況，我問到這個問題的時候對方的回答都是vue的getter和setter、訂閱者模式之類的回答，我就會直接說問的並非這個，而是computed，直接讓對方說computed平時怎麼使用，不少時候獲得的回答是computed的默認方式，只使用了其中的getter，就會繼續追問若是想要再把這個值設置回去要怎麼作，固然通常會讓問到這個程度的這個問題他都答不上來了。

指望答案

<!--直接複製的官網示例-->
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
複製代碼

watch監聽對象

問題

如何watch監聽一個對象內部的變化。

問題描述

這個問題我感受是一個不該該不會的問題，但是我遇到的人大部分都沒有給出我所指望的答案，有些人會說直接監聽obj，好一點的會說直接點出來監聽obj.key，可是不多有人回答deep，開始我還會去問immediate，可是太多人不知道了，因此後來我就只問監聽對象了，只有回答出deep的纔會去問immediate的做用。

指望答案

若是隻是監聽obj內的某一個屬性變化，能夠直接obj.key進行監聽。

watch: {
    'obj.question': function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.debouncedGetAnswer()
    }
  }
複製代碼

若是對整個obj深層監聽

watch: {
    obj: {
        handler: function (newQuestion, oldQuestion) {
          this.answer = 'Waiting for you to stop typing...'
          this.debouncedGetAnswer()
        },
        deep: true,
        immediate: true
    }
  }
複製代碼

immediate的做用：當值第一次進行綁定的時候並不會觸發watch監聽，使用immediate則能夠在最初綁定的時候執行。

v-for循環key的做用

問題

v-for循環時爲何要加key。

問題描述

問這個問題時，好多人再先回答的都是頁面有警告，編輯器有提示，我會直接說不考慮報錯和提示的問題，或者會問若是不加key的話，頁面會不會出現什麼異常狀況。有的人會說是一個標識，標識他的惟一性，我會繼續追問爲何要標識惟一性呢，不加又怎麼樣？

指望答案

vue的dom渲染是虛擬dom，數據發生變化時，diff算法會只比較更改的部分，若是數據項的順序被改變，Vue將不是移動DOM元素來匹配數據項的改變，而是簡單複用此處每一個元素，而且確保它在特定索引下顯示已被渲染過的每一個元素。舉例說明：有一個列表咱們如今在中間插入了一個元素，diff算法會默認複用以前的列表並在最後追加一個，若是列表存在選中一類的狀態則會隨着複用出現綁定錯誤的狀況而不是跟着原元素，key的做用就能夠給他一個標識，讓狀態跟着數據渲染。（這一塊是我本身的一個大概理解，表述不太清楚，具體的能夠去查一下文檔，本文就不具體描述此問題了。）

$nextTick

問題

$nextTick用過嗎，有什麼做用。

問題描述

問到這個問題時，不少人都會說到能夠處理異步，而往下追問爲何要用nextTick，他解決了什麼問題，不用他會怎麼樣的時候就不少人說不上來了。

指望答案

在下次 DOM 更新循環結束以後執行延遲迴調。在修改數據以後當即使用這個方法，獲取更新後的 DOM。(官網解釋)
解決的問題：有些時候在改變數據後當即要對dom進行操做，此時獲取到的dom還是獲取到的是數據刷新前的dom，沒法知足須要，這個時候就用到了$nextTick。

// 修改數據
vm.msg = 'Hello'
// DOM 尚未更新
Vue.nextTick(function () {
  // DOM 更新了
})

// 做爲一個 Promise 使用 (2.1.0 起新增，詳見接下來的提示)
Vue.nextTick()
  .then(function () {
    // DOM 更新了
  })
複製代碼

$set

問題

vue中的$set用過嗎，爲何要用它，解決了什麼問題

問題描述

這個問題知道的人就基本都能說出來，可是不知道的就是一點不瞭解，有的還會說到es6的set結構

指望答案

向響應式對象中添加一個屬性，並確保這個新屬性一樣是響應式的，且觸發視圖更新。它必須用於向響應式對象上添加新屬性，由於 Vue 沒法探測普通的新增屬性 (好比 this.myObject.newProperty = 'hi')（官方示例）

我本身的理解就是，在vue中對一個對象內部進行一些修改時，vue沒有監聽到變化沒法觸發視圖的更新，此時來使用$set來觸發更新，使視圖更新爲最新的數據。

組件間的傳值

問題

說一下組件間的傳值方式，你知道的全部方式都說一下

問題描述

這個問題其實就是想看官方文檔有沒有具體看過，由於不少傳值方式官方文檔上有描述，可是項目中用的相對較少。

基本都能回答上來，父傳子：props；子傳父：$emit；兄弟：eventbus；vuex；有一些會說到sessionStorage和localStorage、路由傳參（這個答案其實並非我想要問的，不過也能夠實現必定的傳值）

如下傳值方式的具體使用方式本文不具體描述了，這個連接是對這幾種組件傳值的具體介紹。

你不知道的vue組件傳值方式

指望答案

1. provide / inject
   這對選項須要一塊兒使用，以容許一個祖先組件向其全部子孫後代注入一個依賴，不論組件層次有多深，並在起上下游關係成立的時間裏始終生效。
2. Vue.observable
   讓一個對象可響應。Vue 內部會用它來處理 data 函數返回的對象。
   返回的對象能夠直接用於渲染函數和計算屬性內，而且會在發生改變時觸發相應的更新。也能夠做爲最小化的跨組件狀態存儲器，用於簡單的場景：

const state = Vue.observable({ count: 0 })

const Demo = {
  render(h) {
    return h('button', {
      on: { click: () => { state.count++ }}
    }, `count is: ${state.count}`)
  }
}
複製代碼

3. $attrs
   包含了父做用域中不做爲 prop 被識別 (且獲取) 的特性綁定 (class 和 style 除外)。當一個組件沒有聲明任何 prop 時，這裏會包含全部父做用域的綁定 (class 和 style 除外)，而且能夠經過 v-bind="$attrs" 傳入內部組件——在建立高級別的組件時很是有用。
4. $listeners
   包含了父做用域中的 (不含 .native 修飾器的) v-on 事件監聽器。它能夠經過 v-on="$listeners" 傳入內部組件——在建立更高層次的組件時很是有用。
5. props
6. $emit
7. eventbus
8. vuex
9. $parent / $children / ref