面試時面試官想要聽到什麼答案（關於一些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、路由傳參（這個答案其實並不是我想要問的，不過也可以實現一定的傳值）

以下傳值方式的具體使用方式本文不具體描述了

期望答案

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}`)
  }
}

1.$attrs
包含了父作用域中不作為 prop 被識別 (且獲取) 的特性綁定 (class 和 style 除外)。當一個組件沒有聲明任何 prop 時，這裡會包含所有父作用域的綁定 (class 和 style 除外)，並且可以通過 v-bind="$attrs" 傳入內部組件——在創建高級別的組件時非常有用。
2.$listeners

包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監聽器。它可以通過 v-on="$listeners" 傳入內部組件——在創建更高層次的組件時非常有用。

3.props

4.$emit

5.eventbus

6.vuex

7.$parent / $children / ref

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