p16

一、什么是Vue.$nextTick()

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

使用場(chǎng)景使用場(chǎng)景

1. 在created()中進(jìn)行dom操作。
2. 等待新的dom元素渲染完畢后執(zhí)行的操作。

我的理解為：nextTick()是將回調(diào)函數(shù)延遲在dom更新數(shù)據(jù)后調(diào)用，就是當(dāng)數(shù)據(jù)更新后且dom渲染后，再自動(dòng)執(zhí)行該函數(shù)

二、$nextTick知道嗎？實(shí)現(xiàn)的原理是什么？是紅任務(wù)還是微任務(wù)？

·微任務(wù)

·原理:

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

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

2）虛擬dom為什么會(huì)提高性能?

虛擬DOM其實(shí)就是一個(gè)JavaScript對(duì)象。通過(guò)這個(gè)avaScript對(duì)象來(lái)描述真實(shí)DOM，真實(shí)DOM的操作，一般都會(huì)對(duì)某塊元素的整體重新渲染，采用虛擬DOM的話，當(dāng)數(shù)據(jù)變化的時(shí)候，只需要局部刷新變化的位置就好了，虛擬DOM相當(dāng)于在js和真實(shí)DOM，DOM加了一個(gè)緩存，利用DOM diff算法避免了沒(méi)有必要的DOM操作，從而提高性能

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

(1)用Javascript對(duì)象結(jié)構(gòu)表示DOM樹(shù)的結(jié)構(gòu);然后用這個(gè)樹(shù)構(gòu)建一個(gè)真正的DOM樹(shù)，插到文檔當(dāng)中

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

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

三、虛擬DOM為什么會(huì)提高性能

1、

• 真實(shí)dom節(jié)點(diǎn)比較臃腫。對(duì)它的訪問(wèn)和修改都像要訪問(wèn)和修改一個(gè)大型object一樣。object存儲(chǔ)在堆。占用空間越大訪問(wèn)性能越低。
• dom和js不是一個(gè)模塊?？缒K訪問(wèn)性能低。
• 不高級(jí)的dom操作會(huì)引起頻繁的回流。回流可能牽連甚廣。性能低。
• 虛擬dom并不是摒棄真實(shí)dom操作（曾經(jīng)有只使用canvas的思想完全不用dom）。而是盡量減少操作。在沒(méi)有虛擬dom思想之前。也會(huì)有很多規(guī)范來(lái)進(jìn)行優(yōu)化減少dom操作。比如統(tǒng)一處理一次回流、比如fragment。后來(lái)就有類似vue react框架用虛擬dom的思想來(lái)減少真實(shí)dom的操作。

2、為什么一定要用虛擬dom？

????你用傳統(tǒng)的原生api或jquery去操作dom時(shí)，瀏覽器會(huì)從構(gòu)建dom樹(shù)開(kāi)始，從頭到尾執(zhí)行一遍流程。

真實(shí)dom的執(zhí)行流程：用js對(duì)象表示真實(shí)的dom結(jié)構(gòu)，當(dāng)狀態(tài)發(fā)生變化的時(shí)候，會(huì)重新創(chuàng)建一個(gè)虛擬dom樹(shù)的結(jié)構(gòu)，然后用新的樹(shù)和舊的樹(shù)進(jìn)行比較，記錄兩顆樹(shù)的差異，把所記錄的差異應(yīng)用到所構(gòu)建的真實(shí)的dom樹(shù)上，視圖就更新了。

概括來(lái)說(shuō)：模板——>渲染函數(shù)——>虛擬dom樹(shù)——>真實(shí)dom。

3、vue的虛擬dom是怎樣的執(zhí)行流程？

????vue.js是通過(guò)編譯將模板渲染成函數(shù)，執(zhí)行函數(shù)可以得到一個(gè)虛擬節(jié)點(diǎn)。在對(duì)dom進(jìn)行操作的時(shí)候，會(huì)觸發(fā)對(duì)應(yīng)的dep中的watcher對(duì)象。wacther對(duì)象會(huì)調(diào)用對(duì)應(yīng)的update來(lái)修改視圖。

4、虛擬dom實(shí)現(xiàn)的原理三部分？

????用javascript對(duì)象模擬真實(shí)的dom樹(shù)，對(duì)dom進(jìn)行抽象。

????diff算法——比較兩個(gè)虛擬dom樹(shù)的差異

????pach算法——將兩個(gè)虛擬dom對(duì)象的差異更新到真實(shí)的dom樹(shù)。（pathc也叫patching，算法，這個(gè)過(guò)程是對(duì)比新舊虛擬節(jié)點(diǎn)之間有哪些不同，然后根據(jù)對(duì)比結(jié)果，找出需要更新的節(jié)點(diǎn)進(jìn)行更新。）

5、虛擬dom的好處？

????降低瀏覽器的性能的消耗：javascript的運(yùn)行速度遠(yuǎn)大于dom操作的執(zhí)行速度，因此，運(yùn)行patching算法來(lái)計(jì)算出真正的需要更新的節(jié)點(diǎn)，最大限度地減少了dom操作。

四、Vue模板（remplate）的編譯過(guò)程

定義： 在Vue.js中，編譯過(guò)程將Vue模板轉(zhuǎn)換為渲染函數(shù)，該渲染函數(shù)用于生成虛擬DOM并最終呈現(xiàn)在瀏覽器中。

下面是Vue模板編譯的簡(jiǎn)要過(guò)程：

解析：編譯器首先會(huì)對(duì)Vue模板進(jìn)行解析，將模板字符串解析為抽象語(yǔ)法樹(shù)（AST）。AST是一種以對(duì)象的形式表示模板結(jié)構(gòu)的數(shù)據(jù)結(jié)構(gòu)。

靜態(tài)分析： 在此階段，編譯器會(huì)對(duì)AST進(jìn)行靜態(tài)分析，收集模板中的所有靜態(tài)節(jié)點(diǎn)（不依賴組件實(shí)例數(shù)據(jù)的節(jié)點(diǎn)）。這樣的靜態(tài)節(jié)點(diǎn)可以在每次重新渲染時(shí)重復(fù)使用，從而提高性能。

優(yōu)化：

1. 編譯器會(huì)對(duì)AST進(jìn)行一些優(yōu)化處理，例如標(biāo)記靜態(tài)根節(jié)點(diǎn)、檢測(cè)靜態(tài)子樹(shù)等。這些優(yōu)化手段可以進(jìn)一步提高渲染性能。
2. 代碼生成： 在這個(gè)階段，編譯器會(huì)根據(jù)AST生成渲染函數(shù)。渲染函數(shù)是一個(gè)函數(shù)，它接收一個(gè)參數(shù)（稱為渲染上下文）并返回一個(gè)虛擬DOM樹(shù)。渲染函數(shù)可以根據(jù)渲染上下文的數(shù)據(jù)動(dòng)態(tài)地生成虛擬DOM。
3. 生成虛擬DOM： 當(dāng)組件需要重新渲染時(shí)，Vue會(huì)調(diào)用渲染函數(shù)生成新的虛擬DOM樹(shù)。渲染函數(shù)會(huì)根據(jù)當(dāng)前的渲染上下文數(shù)據(jù)生成虛擬DOM節(jié)點(diǎn)，并對(duì)比前后兩次渲染的虛擬DOM樹(shù)，找出差異。
4. 打補(bǔ)丁： 在找出差異后，Vue會(huì)根據(jù)差異生成最小的DOM操作序列，并將這些操作應(yīng)用到實(shí)際的DOM上，從而更新視圖。這個(gè)過(guò)程稱為打補(bǔ)?。╬atch）。

總結(jié)： Vue的模板編譯過(guò)程包括解析模板生成抽象語(yǔ)法樹(shù)（AST），靜態(tài)分析優(yōu)化AST，生成渲染函數(shù)，然后通過(guò)渲染函數(shù)生成虛擬DOM樹(shù)，并通過(guò)打補(bǔ)丁的方式將變更應(yīng)用到實(shí)際的DOM上。這個(gè)過(guò)程使得Vue能夠高效地進(jìn)行響應(yīng)式的數(shù)據(jù)更新和視圖渲染。

五、認(rèn)識(shí)vue3

Vue 3 是 Vue.js 的最新版本，它是一個(gè)用于構(gòu)建用戶界面的漸進(jìn)式 JavaScript 框架。從專業(yè)工程師的角度來(lái)看，Vue 3 帶來(lái)了許多重要的改進(jìn)和新特性，這些特性使得開(kāi)發(fā)更加高效和靈活。以下是 Vue 3 的一些主要特點(diǎn)：

1. 性能改進(jìn)：Vue 3 在性能方面進(jìn)行了大量?jī)?yōu)化，包括更小的框架大小、更快的虛擬 DOM 和更高效的組件更新。這意味著 Vue 3 應(yīng)用程序?qū)⒓虞d得更快，運(yùn)行得更快，從而為用戶提供更好的體驗(yàn)。

2. Composition API：Vue 3 引入了一種新的 API，稱為 Composition API，它提供了一種更靈活、更可組合的方式來(lái)組織和重用代碼。與 Vue 2 的 Options API 相比，Composition API 使得在大型項(xiàng)目中管理和共享狀態(tài)更加容易。

3. 更好的 TypeScript 支持：Vue 3 的源代碼完全用 TypeScript 重寫(xiě)，這意味著 Vue 3 與 TypeScript 的集成更加緊密，為開(kāi)發(fā)者提供更好的類型檢查和編輯器支持。

4. 多平臺(tái)支持：Vue 3 的架構(gòu)更加模塊化，使得它可以更容易地適應(yīng)不同的平臺(tái)，如 Web、移動(dòng)設(shè)備和桌面應(yīng)用程序。這使得 Vue 3 成為跨平臺(tái)應(yīng)用程序開(kāi)發(fā)的理想選擇。

5. 新的指令 API：Vue 3 引入了一種新的指令 API，使得創(chuàng)建自定義指令更加簡(jiǎn)單和一致。新的指令 API 還提供了更好的性能，因?yàn)樗鼈兛梢栽诰幾g時(shí)進(jìn)行優(yōu)化。

6. 更多的內(nèi)置組件：Vue 3 提供了一些新的內(nèi)置組件，如 <teleport> 和 <suspense>，這些組件可以幫助開(kāi)發(fā)者更容易地實(shí)現(xiàn)一些常見(jiàn)的 UI 模式和功能。

總之，Vue 3 是一個(gè)功能強(qiáng)大、靈活且高性能的前端框架，它為開(kāi)發(fā)者提供了許多新的工具和特性，以幫助他們更高效地構(gòu)建和維護(hù)復(fù)雜的應(yīng)用程序。從專業(yè)工程師的角度來(lái)看，Vue 3 是一個(gè)值得關(guān)注和學(xué)習(xí)的重要技術(shù)?