P16 016-Vue高頻面試題-4

43.什么是Vue.nextTick()？

1、$nextTick是在下次DOM更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個方法，獲取更新后的DOM，意思是等你DOM加載完畢之后再去調(diào)用nextTick()里面的數(shù)據(jù)內(nèi)容。

44.nextTick知道嗎？實(shí)現(xiàn)的原理是什么？是宏任務(wù)還是微任務(wù)？

微任務(wù)

原理：nextTick方法主要是使用了宏任務(wù)和微任務(wù)，定義了一個異步方法，多次調(diào)用nextTick會將方法存入隊(duì)列中，通過這個異步方法清空隊(duì)列。

作用：nextTick用于下次DOM更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)，在修改數(shù)據(jù)之后使用nextTick用于下次DOM更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)，在修改數(shù)據(jù)之后使用nextTick，則可以在回調(diào)中獲取更新后的DOM。

45.虛擬DOM為什么會提高性能？

虛擬DOM其實(shí)就是一個js對象。通過這個js對象來描述真實(shí)DOM，真實(shí)DOM的操作，一般都會對某塊元素的整體重新渲染，采用虛擬DOM的話，當(dāng)數(shù)據(jù)變化的時候，只需要局部刷新變化的位置就好了。

虛擬DOM相當(dāng)于在js和真實(shí)DOM中間加了一個緩存，利用DOM diff算法避免了沒有必要的DOM操作，從而提高性能。

具體實(shí)現(xiàn)步驟如下：

1）用js對象結(jié)構(gòu)表示DOM樹的結(jié)構(gòu)；然后用這個樹構(gòu)建一個真正的DOM樹，插到文檔當(dāng)中。

2）當(dāng)狀態(tài)變更的時候，重新構(gòu)造一棵新的對象數(shù)。然后用新的樹和舊的樹進(jìn)行比較，記錄兩棵樹差異。

3）把2所記錄的差異應(yīng)用到步驟1所構(gòu)建的真正的DOM樹上，視圖就更新。

46.你做過哪些Vue的性能優(yōu)化？

1）首屏加載優(yōu)化

2）路由懶加載

3）開啟服務(wù)器Gzip

開啟Gzip就是一種壓縮技術(shù)，需要前端提供壓縮包，然后在服務(wù)器開啟壓縮，文件在服務(wù)器壓縮后傳給瀏覽器，瀏覽器解壓后進(jìn)行再進(jìn)行解析。首先安裝Webpack提供的compression-webpack-plugin進(jìn)行壓縮，然后在vue.config.js

4）啟動CDN加速

我們繼續(xù)采用cdn的方式來引入一些第三方資源，就可以緩解我們服務(wù)器的壓力，原理是將我們的壓力分給其他服務(wù)器點(diǎn)。

5）代碼層面優(yōu)化

①computed和watch區(qū)分使用場景

②v-if和v-show區(qū)分使用場景。

③v-for遍歷必須為item添加key，且避免同時使用v-if。

6）Webpack對圖片進(jìn)行壓縮

7）避免內(nèi)存泄露

8）減少ES6轉(zhuǎn)為ES5的冗余代碼

47.Vue的常用修飾符

1）v-model修飾符

①.lazy：輸入框改變，這個數(shù)據(jù)就會改變，lazy這個修飾符會在光標(biāo)離開input框才會更新數(shù)據(jù)

②.trim：輸入框過濾首尾的空格

③.number：先輸入數(shù)字就會限制輸入只能是數(shù)字，先字符串就相當(dāng)于沒有加number，注意，不是輸入框不能輸入字符串，是這個數(shù)據(jù)是數(shù)字

2）事件修飾符

④.stop：阻止事件冒泡，相當(dāng)于調(diào)用了event。stopPropagation()方法

⑤.prevent：阻止默認(rèn)行為，相當(dāng)于調(diào)用了event.preventDefault()方法，比如表單的提交、a標(biāo)簽的跳轉(zhuǎn)就是默認(rèn)事件

⑥.self：只有元素本身觸發(fā)時才觸發(fā)方法，就是只有點(diǎn)擊元素本身才會觸發(fā)。比如一個div里面有個按鈕，div和按鈕都有事件，我們點(diǎn)擊按鈕，div綁定的方法也會觸發(fā)，如果div的click加上self，只有點(diǎn)擊到div的時候才會觸發(fā)，變相的算是阻止冒泡

⑦.once：事件只能用一次，無論點(diǎn)擊幾次，執(zhí)行一次之后都不會再執(zhí)行

⑧.capture：事件的完整機(jī)制是捕獲-目標(biāo)-冒泡，事件觸發(fā)是目標(biāo)往外冒泡

⑨.sync：對prop進(jìn)行雙向綁定

⑩.keyCode：監(jiān)聽按鍵的指令，具體可以查看vue的鍵碼對應(yīng)表

48.Vue中template的編譯過程

vue template模板編譯的過程經(jīng)過parse()生成AST(抽象語法樹)，optimize對靜態(tài)節(jié)點(diǎn)優(yōu)化，generate()生成render字符串之后調(diào)用new Watch()函數(shù)，用來監(jiān)聽數(shù)據(jù)的變化，render函數(shù)就是數(shù)據(jù)監(jiān)聽的回調(diào)所調(diào)用的，其結(jié)果便是重新生成vnode。當(dāng)這個render函數(shù)字符串在第一次mount、或者綁定的數(shù)據(jù)更新的時候，就會被調(diào)用，生成Vnode。如果是數(shù)據(jù)的更新，那么Vnode會與數(shù)據(jù)改變之前的Vnode做diff，對內(nèi)容做改動之后，就會更新到我們真正的DOM

49.談?wù)勀銓ue3有什么了解

六大亮點(diǎn)

1）性能比vue2快1.2倍-2倍

2）支持tree-shaking，按需編譯，體積比vue2更小

3）支持組合API

4）更好的支持TS

5）更先進(jìn)的組件

性能比vue2快1.2倍-2倍如何實(shí)現(xiàn)的呢

1）diff算法更快

vue2是需要全局去比較每個節(jié)點(diǎn)的，若發(fā)現(xiàn)有節(jié)點(diǎn)發(fā)生變化后，就去更新該節(jié)點(diǎn)

vue3是在創(chuàng)建虛擬DOM中，會根據(jù)DOM的內(nèi)容會不會發(fā)生內(nèi)容變化，添加靜態(tài)標(biāo)記，誰有flag，比較誰

2）靜態(tài)提升

vue2中無論元素是否參與更新，每次都會重新創(chuàng)建，然后再渲染vue3中對于不參與更新的元素，會做靜態(tài)提升，只被創(chuàng)建一次，在渲染時直接復(fù)用即可

3）事件偵聽緩存

默認(rèn)情況下，onclick為動態(tài)綁定，所以每次都會追蹤它的變化，但是因?yàn)槭峭缓瘮?shù)，沒有必要追蹤變化，直接緩存復(fù)用即可

在之前會添加靜態(tài)標(biāo)記，會把點(diǎn)擊事件當(dāng)做動態(tài)屬性，會進(jìn)行diff算法比較，但是在事件監(jiān)聽緩存之后就沒有靜態(tài)標(biāo)記了，就會進(jìn)行緩存復(fù)用

為什么vue3體積比vue2小

在vue3中創(chuàng)建vue項(xiàng)目，除了vue-cli，Webpack外還有一種創(chuàng)建方法是vite，vite是作者開發(fā)的一款有意取代Webpack的工具，其實(shí)現(xiàn)原理是利用ES6的import會發(fā)送請求去加載文件的特性，攔截這些請求，做一些預(yù)編譯，省去Webpack冗長的打包時間

50.vue3的組合API

說一說vue3的組合API和之前vue2在完成業(yè)務(wù)邏輯上的區(qū)別

在vue2中：主要是網(wǎng)data和method里面添加內(nèi)容，一個業(yè)務(wù)邏輯需要什么data和method就往里面添加，而組合API就是有一個自己的方法，里面有自己專注的data和method。

組合API的本質(zhì)：首先Composition API和Option API可以共用Composition API本質(zhì)就是把內(nèi)容添加到Option API中進(jìn)行使用。

51.ref和reactive的簡單理解

1）ref和reactive都是vue3的監(jiān)聽數(shù)據(jù)的方法，本質(zhì)是proxy。

2）ref基本類型復(fù)雜類型都可以監(jiān)聽(我們一般用ref監(jiān)聽基本類型)，reactive只能監(jiān)聽對象(arr，JSON)。

3）ref底層還是reactive的二次包裝，ref定義的數(shù)據(jù)訪問的時候要多一個.value。

52.Vuex和redux有什么區(qū)別？他們的共同思想？

Redux和Vuex區(qū)別

1）Vuex改進(jìn)了Redux中的Action和Redux函數(shù)，以mutations變化函數(shù)取代Reducer，無需switch，只需在對應(yīng)的mutation函數(shù)里改變state值就可以

2）Vuex由于Vue自動重新渲染的特性，無需訂閱重新渲染函數(shù)，只要生成新的state就可以

3）Vuex數(shù)據(jù)流的順序是：View調(diào)用store.commit提交對應(yīng)的請求到Store中對應(yīng)的mutation函數(shù) -- store改變(vue監(jiān)測到數(shù)據(jù)變化自動渲染)

共同思想

1）單一的數(shù)據(jù)源

2）變化可以預(yù)測

3）本質(zhì)上：Redux和Vuex都是對MVVM思想的服務(wù)，將數(shù)據(jù)從視圖中抽離的一種方案

4）形式上：Vuex借鑒了Redux，將store作為全局的數(shù)據(jù)中心，進(jìn)行數(shù)據(jù)管理