引言

作為一個(gè)程序員如果你想要找到你心儀的工作，不可避免的就會(huì)問(wèn)到很多八股文，雖然有的和工作沒(méi)有半毛錢關(guān)系，但是你如果想要通過(guò)面試還必須得會(huì)。所以我最近開(kāi)始總結(jié)一些面試題，一是為了加強(qiáng)自己的理解能夠找到一份好的工作，二是為了盡可能的幫助更多的小伙伴能夠快速掌握相關(guān)知識(shí)或者順利通過(guò)面試??。

本篇文章介紹了一些vue的常見(jiàn)問(wèn)題。我盡量將這些問(wèn)題根據(jù)難易程度，相關(guān)聯(lián)度進(jìn)行排列使其更好的過(guò)度與理解。當(dāng)然本篇文章不僅僅是八股文那么簡(jiǎn)單，工作中經(jīng)常也會(huì)經(jīng)常用到這些知識(shí)點(diǎn)。

vue生命周期

這個(gè)問(wèn)題一般問(wèn)的不多,但是如果問(wèn)到了你就必須得答出來(lái)

回答

vue父子組件生命周期

這個(gè)相對(duì)于上一個(gè)問(wèn)題稍微復(fù)雜一點(diǎn),可以試著理解記憶或者直接記住吧

渲染過(guò)程

父beforeCreate

父created

父beforeMount

子beforeCreate

子created

子beforeMount

子mounted

父mounted

更新過(guò)程

父beforeUpdate

子beforeUpdate

子updated

父updated

銷毀過(guò)程

父beforeDestroy

子beforeDestroy

子destroyed

父destroyed

注意 如果子組件是異步組件的話它們的執(zhí)行順序會(huì)發(fā)生改變，會(huì)先執(zhí)行完父組件的生命周期然后再執(zhí)行子組件的生命周期

v-if和v-show

這個(gè)問(wèn)題算是非?；镜念}了，它也很好理解，面試一般會(huì)問(wèn)這兩個(gè)指令的區(qū)別是什么，以及在什么場(chǎng)景下分別用哪個(gè)指令合適 回答

• v-if表示一個(gè)dom元素是否被創(chuàng)建，而v-show則是控制這個(gè)dom元素的display屬性是否為none
• 一般在頻繁切換狀態(tài)的地方使用v-show,v-if則更適合條件不經(jīng)常改變的場(chǎng)景，因?yàn)樗袚Q開(kāi)銷相對(duì)較大

v-for和v-if優(yōu)先級(jí)

這個(gè)問(wèn)題被問(wèn)到的頻率還是比較高的，雖然它在實(shí)際開(kāi)發(fā)中并不會(huì)這么用。

回答

• 開(kāi)發(fā)過(guò)程中一般不建議同時(shí)將v-for和v-if放在一個(gè)標(biāo)簽中使用
• Vue2中v-for的優(yōu)先級(jí)會(huì)更高，所以會(huì)先執(zhí)行循環(huán)，再進(jìn)行v-if判斷，所以這樣就會(huì)導(dǎo)致無(wú)論需不需展示這個(gè)元素，都會(huì)先遍歷整個(gè)列表
• 在Vue3中v-if的優(yōu)先級(jí)會(huì)更高，但是當(dāng)我們遍歷一個(gè)數(shù)組的時(shí)候，根據(jù)數(shù)組中的某個(gè)元素進(jìn)行v-if判斷的時(shí)候就會(huì)報(bào)錯(cuò)，因?yàn)関-if會(huì)先執(zhí)行此時(shí)還沒(méi)有拿到這個(gè)數(shù)組。所以Vue3中依然不建議這樣使用

說(shuō)一下computed和watch

computed和watch實(shí)際工作中用的比較多,所以問(wèn)的也比較多,一般理解了基本都能回答上來(lái)

• computed是計(jì)算屬性,當(dāng)一個(gè)屬性受一個(gè)或者多個(gè)屬性影響的時(shí)候可以使用.watch是偵聽(tīng)器,當(dāng)我們需要根據(jù)一個(gè)屬性的變化而做出一些處理的時(shí)候,可以使用watch來(lái)對(duì)這個(gè)屬性進(jìn)行監(jiān)聽(tīng)
• computed具有緩存的特點(diǎn),即當(dāng)它所依賴的屬性發(fā)生改變的時(shí)候它才會(huì)重新執(zhí)行內(nèi)部邏輯.如下代碼

<template>
    <div>{{ addSum }}</div>
    <div>{{ addSum }}</div>
    <div>{{ addSum }}</div>
</template>
<script setup>
import { computed, ref, watch } from "vue";
const a = ref(1)
const b = ref(2)
let addSum = computed(() => {
    console.log('內(nèi)部邏輯執(zhí)行')
    return a.value + b.value
})
</script>

頁(yè)面多次使用addSum,但是只會(huì)打印一次"內(nèi)部邏輯執(zhí)行"

• watch在頁(yè)面首次加載的時(shí)候默認(rèn)不會(huì)執(zhí)行,需要設(shè)置immediate:true首次才會(huì)執(zhí)行監(jiān)聽(tīng)
• watch默認(rèn)只監(jiān)聽(tīng)一層數(shù)據(jù),不監(jiān)聽(tīng)多層數(shù)據(jù)里屬性的變化,需要設(shè)置deep:true才會(huì)進(jìn)行深度監(jiān)聽(tīng)

vue-router

關(guān)于vue-router能問(wèn)的問(wèn)題非常多，比如它的實(shí)現(xiàn)原理，路由跳轉(zhuǎn)，路由守衛(wèi)等等，所以建議去系統(tǒng)的查看vue-router文檔

問(wèn)題1：vue-router是什么，描述一下它的原理？

Vue Router是Vue官方的路由管理器，有hash和history兩種模式

hash模式是通過(guò)監(jiān)聽(tīng)hashchange事件來(lái)實(shí)現(xiàn)更新頁(yè)面部分內(nèi)容的操作，url后面會(huì)帶有#號(hào)

history模式則是通過(guò)監(jiān)聽(tīng)popstate事件來(lái)實(shí)現(xiàn)更新頁(yè)面部分內(nèi)容的操作原理和hash模式差不多，只不過(guò)url后面不會(huì)出現(xiàn)#會(huì)顯得更加美觀。同時(shí)會(huì)帶來(lái)一個(gè)問(wèn)題，因?yàn)闆](méi)有#號(hào)，所以當(dāng)用戶刷新頁(yè)面時(shí)會(huì)向服務(wù)器發(fā)請(qǐng)求導(dǎo)致請(qǐng)求資源為404，因此需要對(duì)nginx進(jìn)行一個(gè)配置，需要把所有路由都重定向到根頁(yè)面

問(wèn)題2：路由跳轉(zhuǎn)方式有哪些？

• 內(nèi)置組件跳轉(zhuǎn)
• router.push({ path: '/home' }),router.replace({ path: '/home' })

問(wèn)題3:說(shuō)一下路由守衛(wèi)？

路由守衛(wèi)分為全局路由守衛(wèi)，路由獨(dú)享守衛(wèi)，組件路由守衛(wèi)

• 全局路由守衛(wèi)

• beforeEach,接收to、from、next三個(gè)參數(shù)，每個(gè)路由跳轉(zhuǎn)前都會(huì)觸發(fā)，登錄驗(yàn)證時(shí)用的比較多
• beforeResolve，和beforeEach類似，區(qū)別是在導(dǎo)航被確認(rèn)之前，同時(shí)在所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后調(diào)用
• afterEach，在路由跳轉(zhuǎn)完成后調(diào)用，接收to、from兩個(gè)參數(shù)

• 路由獨(dú)享守衛(wèi)

beforeEnter,一般配置在路由配置文件中（router/index.js），對(duì)進(jìn)入某個(gè)路由之前進(jìn)行相關(guān)操作

• 組件路由守衛(wèi)

接收to、from、next三個(gè)參數(shù)

beforeRouteEnter,進(jìn)入該組件之前調(diào)用，無(wú)法獲取到vue實(shí)例

beforeRouteUpdate，在當(dāng)前路由改變，但是該組件被復(fù)用時(shí)調(diào)用

beforeRouteLeave, 在離開(kāi)當(dāng)前組件時(shí)調(diào)用

vue2和vue3區(qū)別

當(dāng)面試問(wèn)你會(huì)用vue3嗎,如果你回答會(huì)用的話,那么大概率會(huì)問(wèn)vue2和vue3有哪些區(qū)別,最近我去面試的時(shí)候百分之90都問(wèn)了這個(gè)問(wèn)題。

回答

• 寫(xiě)法上的區(qū)別:vue2使用的是options(選項(xiàng))Api,vue3的是composition Api(當(dāng)然vue3也兼容composition api)。options Api中methods，compute，data等api都是分散的。而composition api中的代碼是根據(jù)邏輯功能來(lái)組織的,我們可以將一個(gè)功能所定義的methods，compute，data等api會(huì)放在一起,讓我們可以更靈活地組合組件邏輯。
• vue2將響應(yīng)式數(shù)據(jù)放到data函數(shù)中,而vue3則是使用ref和reactive將數(shù)據(jù)聲明為響應(yīng)式
• 響應(yīng)式實(shí)現(xiàn)方式:vue2中是通過(guò)Object.defineProperty對(duì)數(shù)據(jù)劫持實(shí)現(xiàn)的,vue3中則是使用Proxy對(duì)數(shù)據(jù)代理實(shí)現(xiàn)的。
• 生命周期區(qū)別:vue3中將beforeCreate和created合并到了setup函數(shù)中
• 根節(jié)點(diǎn): vue3組件允許多個(gè)根節(jié)點(diǎn),而vue2只允許一個(gè)
• 內(nèi)置組件: vue3新增了傳送組件Teleport和異步依賴處理組件Suspense

vue插件使用

面試一般會(huì)問(wèn)你如何寫(xiě)一個(gè)vue插件,所以沒(méi)寫(xiě)過(guò)vue插件的最好去親自體驗(yàn)一下

回答:

vue實(shí)例會(huì)有一個(gè)use函數(shù),它接受的是一個(gè)帶有install函數(shù)的對(duì)象和一個(gè)可選的選項(xiàng)對(duì)象,當(dāng)我們使用 vue.use(plugin)或者app.use(plugin)會(huì)調(diào)用我們插件的install屬性的函數(shù),并且將當(dāng)前組件的實(shí)例傳進(jìn)來(lái).所以在插件中就可以對(duì)這個(gè)實(shí)例進(jìn)行一些操作來(lái)實(shí)現(xiàn)我們插件的功能

vue插槽

插槽slot可以理解為占坑，當(dāng)使用一個(gè)組件的時(shí)候，在組件標(biāo)簽里的對(duì)應(yīng)的內(nèi)容就會(huì)替換掉這個(gè)組件中的slot標(biāo)簽。

插槽分為默認(rèn)插槽，具名插槽，作用域插槽。

默認(rèn)插槽 子組件中用slot標(biāo)簽來(lái)確定渲染位置，父組件使用它時(shí)直接在子組件的標(biāo)簽內(nèi)寫(xiě)入內(nèi)容即可

//子組件
<template>
    <slot />
</template>

//父組件
<Child>
  <div>默認(rèn)插槽</div>  
</Child>

具名插槽

顧名思義就是具有名字的插槽，子組件中可以用name熟悉對(duì)slot命名，父組件在使用的時(shí)候通過(guò) template中的v-slot:name或者#name來(lái)定義這個(gè)插槽中的內(nèi)容

//子組件
<template>
  <slot name="content"></slot>
</template>

//父組件
<Child>
    <template v-slot:content>具名插槽內(nèi)容</template>
</Child>

作用域插槽

子組件中的slot可以通過(guò)類似組件屬性傳遞的方式將子組件的值傳遞給父組件中這個(gè)子組件的插槽內(nèi)容中（子組件標(biāo)簽內(nèi)），在父組件使用子組件的時(shí)候要用v-slot的值進(jìn)行接收這些參數(shù)，默認(rèn)插槽可以將其直接寫(xiě)在子組件標(biāo)簽上，具名插槽則寫(xiě)在template上。而傳過(guò)來(lái)的值只能在子組件標(biāo)簽中或者template標(biāo)簽中使用。所以在父組件作用域中獲取到了子組件作用域中的變量，可以認(rèn)為作用域插槽延伸了子組件數(shù)據(jù)的作用范圍，因此叫做作用域插槽

如果你想詳細(xì)理解插槽的作用可以閱讀這篇文章Vue3中插槽(slot)用法匯總 

組件通信

這里我大概歸納了一下vue2和vue3的傳參方式

它們的具體用法可以參考我的這篇文章盤點(diǎn)Vue2和Vue3的10種組件通信方式(值得收藏) x和Pinia，前提你了解這兩個(gè)狀態(tài)管理器，因?yàn)槟阏f(shuō)了大概率下個(gè)問(wèn)題就會(huì)問(wèn)你Vuex和Pinia

vuex

面試問(wèn)到這個(gè)問(wèn)題的時(shí)候，不要上來(lái)就開(kāi)始說(shuō)什么state,mutation...。你要先闡述Vuex干嘛用的，什么時(shí)候需要用Vuex。

回答

• Vuex是Vue中的全局狀態(tài)管理框架，它可以管理應(yīng)用的所有組件的狀態(tài)。并不是每個(gè)項(xiàng)目都需要引入Vuex的，當(dāng)我們的項(xiàng)目有很多個(gè)頁(yè)面，并且這些頁(yè)面共享著多個(gè)數(shù)據(jù)狀態(tài)，此時(shí)我們可以引入Vuex。
• Vuex有三個(gè)核心的概念，state,mutations,actions,其中state為存放數(shù)據(jù)的地方，mutations中的函數(shù)作用則是用來(lái)修改state，actions中一般是用了處理一些異步操作的函數(shù)。
• Vuex除了上面三個(gè)概念還有getters,moudles，getters就像Vue中的計(jì)算屬性computed一樣用來(lái)描述依賴響應(yīng)式狀態(tài)state中的復(fù)雜邏輯。moudles則是可以將store分割成模塊（module），每個(gè)模塊都擁有自己的state,mutations,actions等，在大型應(yīng)用中經(jīng)常用到
• 場(chǎng)景：當(dāng)我們異步獲取結(jié)果并賦值給state的時(shí)候，比如數(shù)據(jù)請(qǐng)求，我們可以在actions中進(jìn)行數(shù)據(jù)請(qǐng)求，拿到結(jié)果通過(guò)它的dispatch方法調(diào)用mutations中修改state的函數(shù)，從而將結(jié)果賦值給了state

pinia

這個(gè)現(xiàn)在問(wèn)的好像不多，從我最近面試來(lái)看只有我提到了才會(huì)問(wèn)一下，但是以后問(wèn)的肯定會(huì)越來(lái)越多。關(guān)于pinia問(wèn)的一般是它和Vuex的區(qū)別，確切的說(shuō)應(yīng)該是它和Vuex4之間的區(qū)別

回答

pinia其實(shí)就是Vuex5，它和Vuex的主要區(qū)別有以下幾點(diǎn)

• Pinia使用更簡(jiǎn)單，更符合開(kāi)發(fā)者的開(kāi)發(fā)習(xí)慣
• pinia中沒(méi)有了mutations,狀態(tài)state的修改可以直接進(jìn)行修改，或者在actions中修改，或者使用它的$patch方法進(jìn)行修改
• pinia中沒(méi)有了modules,如果想使用多個(gè)store，直接使用defineStore定義多個(gè)store傳入不同的id即可
• 更好的TS支持，不需要?jiǎng)?chuàng)建自定義的復(fù)雜包裝器來(lái)支持TS

vue自定義指令

vue 官方提供了v-text、v-for、v-model、v-if 等常用的指令。除此之外vue 還允許開(kāi)發(fā)者自定義指令。面試經(jīng)常會(huì)問(wèn)什么是自定義指令?你用自定義指令做過(guò)哪些功能?

回答1:什么是自定義指令?

• 自定義指令包含局部指令和全局指令,在模板中使用指令前必須先使用directives選項(xiàng)注冊(cè)。局部指令指在某個(gè)組件中注冊(cè),而全局則是將指令注冊(cè)到全局,通常在main.js中注冊(cè)。
• 自定義指令由一個(gè)包含類似組件生命周期鉤子的對(duì)象來(lái)定義。它的生命周期鉤子包含created,beforeMount,mounted,beforeUpdate,updated,beforeUnmount,unmounted,
• 常用的鉤子為mounted 和 updated,它接受el,binding等參數(shù).binding參數(shù)的值一般包含綁定到這個(gè)元素上的信息,比如下面這個(gè)指令

<div v-example:foo.bar="baz">

它的binding會(huì)是這個(gè)對(duì)象

 {
    arg: 'foo',
    modifiers: { bar: true },
    value: /* `baz` 的值 */,
    oldValue: /* 上一次更新時(shí) `baz` 的值 */ 
 }

回答2:你用自定義指令做過(guò)哪些功能?

• 數(shù)據(jù)埋點(diǎn),通過(guò)綁定自定義事件傳入點(diǎn)擊當(dāng)前元素需要埋點(diǎn)的事件名,在指令中監(jiān)聽(tīng)當(dāng)前元素的點(diǎn)擊事件后調(diào)用后臺(tái)接口將事件名傳入
• 權(quán)限控制,通過(guò)綁定自定義事件傳入控制當(dāng)前元素的權(quán)限字段,在指令中獲取到當(dāng)前元素根據(jù)權(quán)限字段來(lái)控制該元素的狀態(tài)(顯示,隱藏等)
• ...

keep-alive

官網(wǎng)描述

<KeepAlive> 是一個(gè)內(nèi)置組件，它的功能是在多個(gè)組件間動(dòng)態(tài)切換時(shí)緩存被移除的組件實(shí)例。

回答

• 通常我們切換組件的時(shí)候，上一個(gè)組件就會(huì)被銷毀，而當(dāng)我們使用<KeepAlive>將其包裹的話這個(gè)組件就會(huì)被緩存，當(dāng)這個(gè)組件再一次被顯示時(shí)就會(huì)保留之前的狀態(tài)。
• keep-alive接收兩個(gè)屬性include 和 exclude，分別代表哪些組件要用緩存和哪些不需要緩存，它接收組件的名字?jǐn)?shù)組，字符串或者正則，當(dāng)我們使用動(dòng)態(tài)組件component或者路由router-view的時(shí)候可以使用
• keep-alive還接收max屬性表示最大緩存實(shí)例數(shù)，如果超出這個(gè)數(shù)則最久沒(méi)有被訪問(wèn)的緩存實(shí)例將被銷毀。
• keep-alive有兩個(gè)生命周期，分別是activated和deactivated，activated鉤子會(huì)在首次掛載或者每次從緩存中被重新插入的時(shí)候調(diào)用。deactivated鉤子則是在組件從DOM上移除或者組件卸載時(shí)調(diào)用

vue2混入-Mixin

vue3中已經(jīng)沒(méi)有Mixin這個(gè)概念了，所以未來(lái)被問(wèn)到的幾率會(huì)越來(lái)越小，但是目前被問(wèn)到的頻率還是很高的。一般會(huì)它的概念以及優(yōu)缺點(diǎn)，有時(shí)還會(huì)問(wèn)它與父組件的生命周期執(zhí)行順序

vue官網(wǎng)描述：

混入 (mixin) 提供了一種非常靈活的方式，來(lái)分發(fā) Vue 組件中的可復(fù)用功能。一個(gè)混入對(duì)象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對(duì)象時(shí)，所有混入對(duì)象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)。

回答 1.Mixin的作用將組件的公共邏輯提取出來(lái)，哪個(gè)組件需要用到時(shí)，直接將提取的這部分混入到組件內(nèi)部即可 2. Mixin的生命周期會(huì)在父組件生命周期之前執(zhí)行，如果Mixin中的屬性或者方法與父組件沖突則會(huì)使用父組件中的 2. 優(yōu)點(diǎn)：可以降低代碼冗余提高邏輯復(fù)用性。 3. 缺點(diǎn)：命名容易沖突，不好追溯源，后期排查不方便

vue響應(yīng)式原理

這道題問(wèn)道的頻率極高,就我經(jīng)歷的多場(chǎng)面試幾乎都會(huì)問(wèn)到,而且是面試到vue方面的開(kāi)門題。

下面是我自己的理解回答,以vue2為例,大家可以借鑒參考

• vue的響應(yīng)式原理是根據(jù)Object.defineProperty這個(gè)api來(lái)對(duì)數(shù)據(jù)進(jìn)行劫持并結(jié)合發(fā)布者-訂閱者模式實(shí)現(xiàn)的
• 首先會(huì)利用Object.defineProperty中的get函數(shù)來(lái)對(duì)vue中的data的所有屬性進(jìn)行訪問(wèn)劫持,中間會(huì)涉及到劫持data中更深層次的屬性需要遞歸調(diào)用劫持方法。這里是通過(guò)一個(gè)Observer類實(shí)現(xiàn)的
• 劫持到每一個(gè)屬性后會(huì)給這個(gè)屬性綁定多個(gè)訂閱者watcher,因?yàn)橐粋€(gè)屬性可能被用在很多地方;而這個(gè)watcher中則包含更新視圖的函數(shù)update。
• watcher和屬性的對(duì)應(yīng)關(guān)系以及和視圖的聯(lián)系則是通過(guò)編譯模板Compile類來(lái)實(shí)現(xiàn)的。Compile中會(huì)拿到整個(gè)dom對(duì)象,然后遍歷元素子節(jié)點(diǎn)獲取到使用過(guò)vue中data屬性的則給該屬性直接添加一個(gè)watcher并賦予一些更新當(dāng)前視圖的方法.
• 每個(gè)屬性的多個(gè)訂閱者watcher都會(huì)被添加到對(duì)應(yīng)的數(shù)組中,這里則是通過(guò)Deps類實(shí)現(xiàn)的,初始化watcher的時(shí)候會(huì)調(diào)用Deps中的addSub方法將對(duì)應(yīng)watcher添加該類的Subs數(shù)組中
• 當(dāng)data中的某個(gè)屬性發(fā)生改變時(shí)則會(huì)觸發(fā)Object.defineProperty中的set函數(shù),這時(shí)便會(huì)調(diào)用該屬性的Deps類中的notify函數(shù)遍歷Subs數(shù)組中的訂閱者watcher并調(diào)用其函數(shù)update去觸發(fā)視圖的更新

Object.defineProperty和proxy區(qū)別

一般問(wèn)完響應(yīng)式原理可能會(huì)問(wèn)這兩者的區(qū)別

回答

• Object.defineProperty 只能代理屬性，Proxy 代理的是對(duì)象。
• 對(duì)象上新增屬性，Proxy可以監(jiān)聽(tīng)到，Object.defineProperty不能。
• Object.defineProperty 的代理行為是在破壞原對(duì)象的基礎(chǔ)上實(shí)現(xiàn)的，Proxy 則不會(huì)破壞原對(duì)象，只是在原對(duì)象上覆蓋了一層。
• 數(shù)組新增修改，Proxy可以監(jiān)聽(tīng)到，Object.defineProperty不能。
• Proxy不兼容IE11及以下

vue3內(nèi)置組件

vue3新增了兩個(gè)內(nèi)置組件分別是Teleport和Suspense。

• Teleport組件

可以稱之為傳送門，作用將其插槽內(nèi)容渲染到 DOM 中的另一個(gè)位置，接收兩個(gè)參數(shù)to（要去的位置）和disabled（是否留在原位置）。接收比如下面代碼

<teleport to="#popup"> 
    <video src="./my-movie.mp4"> 
</teleport>

video將會(huì)被傳送到id為popup的元素下。

• Suspense組件

• <Suspense> 組件用于協(xié)調(diào)對(duì)組件樹(shù)中嵌套的異步依賴的處理。
• 它一般用于包裹多個(gè)異步組件處理多個(gè)異步組件加載前與完成后的統(tǒng)一狀態(tài)
• <Suspense> 組件有兩個(gè)插槽：#default 和 #fallback,在初始渲染時(shí)，<Suspense> 將在內(nèi)存中渲染其默認(rèn)的插槽內(nèi)容。如果在這個(gè)過(guò)程中遇到任何異步依賴，則會(huì)進(jìn)入掛起狀態(tài)等待異步組件加載完畢。在掛起狀態(tài)期間，展示的是 #fallback插槽內(nèi)容

nextTick及原理

關(guān)于nextTick會(huì)問(wèn)到它的用法,然后是它的原理,然后還可能問(wèn)到JS的時(shí)間循環(huán)機(jī)制。

問(wèn)題1:vue中的nextTick是干什么用的?

這個(gè)其實(shí)比較簡(jiǎn)單,用過(guò)都知道它是干嘛的,vue官方的解釋是:

在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個(gè)方法，獲取更新后的 DOM。

這是什么意思呢,其實(shí)vue中修改data不會(huì)立刻觸發(fā)dom更新;而是把需要更新的Watcher加入到queueWatcher隊(duì)列中,然后在合適的時(shí)機(jī)在nextTick中調(diào)用這些Watcher的更新函數(shù)進(jìn)行dom更新,所以在data剛被修改的時(shí)候,我們是獲取不到更新后的dom的,這時(shí)候便需要調(diào)用nextTick函數(shù)在它的回調(diào)函數(shù)中獲取到變化后的dom

問(wèn)題2:nextTick原理

• nextTick原理是借助瀏覽器事件循環(huán)來(lái)完成的,因?yàn)槊看问录h(huán)之間都有一次視圖渲染,nextTick盡量在視圖渲染之前完成dom更新,所以nextTick優(yōu)先使用的是promise(微任務(wù))實(shí)現(xiàn)
• 每次執(zhí)行nextTick時(shí)會(huì)將傳入的回調(diào)函數(shù)放入一個(gè)隊(duì)列中(callbacks數(shù)組),然后當(dāng)在本次事件循環(huán)的同步代碼執(zhí)行完畢后開(kāi)啟一個(gè)微任務(wù)(promise或者M(jìn)utationObserver)去依次執(zhí)行這個(gè)callbacks中的回調(diào)函數(shù)。
• 但是當(dāng)瀏覽器不支持promise的時(shí)候在vue2中會(huì)進(jìn)行進(jìn)行降級(jí)處理,依次使用setImmediate、setTimeout開(kāi)啟一個(gè)宏任務(wù)執(zhí)行callbacks
• 當(dāng)一個(gè)data數(shù)據(jù)更新時(shí)對(duì)應(yīng)的watcher便會(huì)調(diào)用一次nextTick,將它對(duì)應(yīng)的dom更新操作作為回調(diào)函數(shù)放入callbacks中,所以當(dāng)我們想獲取這個(gè)data更新后的dom需要在其值變化后也調(diào)用nextTick將回調(diào)函數(shù)傳入排在上個(gè)更新dom的回調(diào)函數(shù)后面,所以我們可以在這個(gè)nextTick的回調(diào)函數(shù)中獲取到更新后的data

問(wèn)題3:js事件循環(huán)機(jī)制

不屬于vue,后面文章再介紹

vue虛擬dom,diff算法

這題在工作中有用嗎是??？？答案是沒(méi)有用，但是在面試中有用啊，所以我們要會(huì)回答??

問(wèn)題1：什么是虛擬dom？

簡(jiǎn)單來(lái)說(shuō)就是一個(gè)描述dom結(jié)構(gòu)的js對(duì)象

問(wèn)題2：為什么要用虛擬dom？

• 每當(dāng)我們用原生JS或者JQ操作DOM時(shí)，瀏覽器會(huì)從頭開(kāi)始進(jìn)行DOM樹(shù)的構(gòu)建，頻繁的操作DOM開(kāi)銷是很大的。
• 而虛擬DOM就是為了減少這些操作的，虛擬DOM首先會(huì)通過(guò)狀態(tài)生成一個(gè)虛擬節(jié)點(diǎn)樹(shù)（js對(duì)象），然后使用虛擬節(jié)點(diǎn)樹(shù)進(jìn)行渲染。當(dāng)某些狀態(tài)發(fā)生變更時(shí)會(huì)生成新的虛擬DOM節(jié)點(diǎn)樹(shù)，然后與上一次虛擬DOM節(jié)點(diǎn)樹(shù)進(jìn)行比較（diff），從而找到差異的部分，最后渲染到真實(shí)的DOM節(jié)點(diǎn)上面

問(wèn)題3：說(shuō)一下diff算法

diff算法的本質(zhì)是找出兩個(gè)對(duì)象之間的差異，目的是盡可能復(fù)用節(jié)點(diǎn)。在vue中是當(dāng)狀態(tài)發(fā)生改變，用來(lái)計(jì)算改變后的虛擬DOM與改變前的虛擬DOM之間的差異的算法。

具體實(shí)現(xiàn)不是幾句話就能說(shuō)清楚的，推薦一篇文章聊聊 Vue 的雙端 diff 算法 )

結(jié)語(yǔ)

以上問(wèn)題基本都是查閱部分資料結(jié)合自己的理解總結(jié)而來(lái)，所以難免會(huì)有一些錯(cuò)誤以及不妥之處，如果你發(fā)現(xiàn)了還希望不吝指出，萬(wàn)分感謝。

更多關(guān)于Vue高頻面試題的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！