下面進入正文，本文會列舉一些平時面試時問到的問題和答案，並說明我在當時問到這個問題時所期望對方的回答：
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 這對選項需要一起使用，以允許一個祖先組件向其所有子孫后代注入一個依賴，不論組件層次有多深，並在起上下游關系成立的時間里始終生效。 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}`) } } 復制代碼 $attrs 包含了父作用域中不作為 prop 被識別 (且獲取) 的特性綁定 (class 和 style 除外)。當一個組件沒有聲明任何 prop 時，這里會包含所有父作用域的綁定 (class 和 style 除外)，並且可以通過 v-bind="$attrs" 傳入內部組件——在創建高級別的組件時非常有用。 $listeners 包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監聽器。它可以通過 v-on="$listeners" 傳入內部組件——在創建更高層次的組件時非常有用。 props $emit eventbus vuex $parent / $children / ref
作者：dragonet
鏈接：https://juejin.im/post/5dac07675188253d706643f4
來源：掘金
vue 248個知識點（面試題）為你保駕護航
https://juejin.im/post/5d153267e51d4510624f9809