前言
自己也只是一個前端的小白，因為公司大佬都比較忙，面試這種事就落到了我這小白身上，第一次叫我去的時候我是百般拒絕的，因為自己還是有自知之明的，但是別人實在抽不開身，沒辦法只能去了，他們開玩笑說就按你這水平來就行了，啥時候你問不住了就讓他來復試就行，
前前后后也面了一些人，加上自己面試時候整理的一些問題，寫了這篇文章，感謝撥冗翻閱拙作,敬請斧正，
下面進入正文，本文會列舉一些平時面試時問到的問題和答案，并說明我在當時問到這個問題時所期望對方的回答：
問題
請說一下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的問題）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/156872.html
標籤：JavaScript