本篇文章給大家談?wù)剉ue源碼全方位解析百度云，以及vue源碼分析視頻教程對應(yīng)的知識點(diǎn)，希望對各位有所幫助，不要忘了收藏本站喔。

本文目錄一覽：

• 1、【面試題解析】從 Vue 源碼分析 key 的作用
• 2、Vue3入口文件解析
• 3、手把手教你讀Vue2源碼-2

【面試題解析】從 Vue 源碼分析 key 的作用

最近看了面試題中有一個這樣的題， v-for 為什么要綁定 key？

Vue 中 key 很多人都弄不清楚有什么作用，甚至還有些人認(rèn)為不綁定 key 就會報錯。

其實(shí)沒綁定 key 的話，Vue 還是可以正常運(yùn)行的，報警告是因為沒通過 Eslint 的檢查。

接下來將通過源碼一步步分析這個 key 的作用。

Virtual DOM 最主要保留了 DOM 元素的層級關(guān)系和一些基本屬性，本質(zhì)上就是一個 JS 對象。相對于真實(shí)的 DOM，Virtual DOM 更簡單，操作起來速度更快。

如果需要改變 DOM，則會通過新舊 Virtual DOM 對比，找出需要修改的節(jié)點(diǎn)進(jìn)行真實(shí)的 DOM 操作，從而減小性能消耗。

傳統(tǒng)的 Diff 算法需要遍歷一個樹的每個節(jié)點(diǎn)，與另一棵樹的每個節(jié)點(diǎn)對比，時間復(fù)雜度為 O(n2)。

Vue 采用的 Diff 算法則通過逐級對比，大大降低了復(fù)雜性，時間復(fù)雜度為 O(n)。

VNode 更新首先會經(jīng)過 patch 函數(shù)， patch 函數(shù)源碼如下：

vnode 表示更新后的節(jié)點(diǎn)，oldVnode 表示更新前的節(jié)點(diǎn)，通過對比新舊節(jié)點(diǎn)進(jìn)行操作。

1、vnode 未定義，oldVnode 存在則觸發(fā) destroy 的鉤子函數(shù)

2、oldVnode 未定義，則根據(jù) vnode 創(chuàng)建新的元素

3、oldVnode 不為真實(shí)元素并且 oldVnode 與 vnode 為同一節(jié)點(diǎn)，則會調(diào)用 patchVnode 觸發(fā)更新

4、oldVnode 為真實(shí)元素或者 oldVnode 與 vnode 不是同一節(jié)點(diǎn)，另做處理

接下來會進(jìn)入 patchVnode 函數(shù)，源碼如下：

1、vnode 的 text 不存在，則會比對 oldVnode 與 vnode 的 children 節(jié)點(diǎn)進(jìn)行更新操作

2、vnode 的 text 存在，則會修改 DOM 節(jié)點(diǎn)的 text

接下來在 updateChildren 函數(shù)內(nèi)就可以看到 key 的用處。

key 的作用主要是給 VNode 添加唯一標(biāo)識，通過這個 key，可以更快找到新舊 VNode 的變化，從而進(jìn)一步操作。

key 的作用主要表現(xiàn)在以下這段源碼中。

updateChildren 過程為：

1、分別用兩個指針（startIndex, endIndex）表示 oldCh 和 newCh 的頭尾節(jié)點(diǎn)

2、對指針?biāo)鶎?yīng)的節(jié)點(diǎn)做一個兩兩比較，判斷是否屬于同一節(jié)點(diǎn)

3、如果4種比較都沒有匹配，那么判斷是否有 key，有 key 就會用 key 去做一個比較；無 key 則會通過遍歷的形式進(jìn)行比較

4、比較的過程中，指針往中間靠，當(dāng)有一個 startIndex endIndex，則表示有一個已經(jīng)遍歷完了，比較結(jié)束

從 VNode 的渲染過程可以得知，Vue 的 Diff 算法先進(jìn)行的是同級比較，然后再比較子節(jié)點(diǎn)。

子節(jié)點(diǎn)比較會通過 startIndex、endIndex 兩個指針進(jìn)行兩兩比較，再通過 key 比對子節(jié)點(diǎn)。如果沒設(shè)置 key，則會通過遍歷的方式匹配節(jié)點(diǎn)，增加性能消耗。

所以不綁定 key 并不會有問題，綁定 key 之后在性能上有一定的提升。

綜上，key 主要是應(yīng)用在 Diff 算法中，作用是為了更快速定位出相同的新舊節(jié)點(diǎn)，盡量減少 DOM 的創(chuàng)建和銷毀的操作。

希望以上內(nèi)容能夠?qū)Ω魑恍』锇橛兴鶐椭?，祝大家面試順利?/p>

Vue 的文檔中對 key 的說明如下：

關(guān)于就地修改，關(guān)鍵在于 sameVnode 的實(shí)現(xiàn)，源碼如下：

可以看出，當(dāng) key 未綁定時，主要通過元素的標(biāo)簽等進(jìn)行判斷，在 updateChildren 內(nèi)會將 oldStartVnode 與 newStartVnode 判斷為同一節(jié)點(diǎn)。

如果 VNode 中只包含了文本節(jié)點(diǎn)，在 patchVnode 中可以直接替換文本節(jié)點(diǎn)，而不需要移動節(jié)點(diǎn)的位置，確實(shí)在不綁定 key 的情況下效率要高一丟丟。

某些情況下不綁定 key 的效率更高，那為什么大部分Eslint的規(guī)則還是要求綁定 key 呢？

因為在實(shí)際項目中，大多數(shù)情況下 v-for 的節(jié)點(diǎn)內(nèi)并不只有文本節(jié)點(diǎn)，那么 VNode 的字節(jié)點(diǎn)就要進(jìn)行銷毀和創(chuàng)建的操作。

相比替換文本帶來的一丟丟提升，這部分會消耗更多的性能，得不償失。

了解了就地修改，那么我們在一些簡單節(jié)點(diǎn)上可以選擇不綁定 key，從而提高性能。

如果你喜歡我的文章，希望可以關(guān)注一下我的公眾號【前端develop】

Vue3入口文件解析

vue作為漸進(jìn)式的前端框架，當(dāng)我們僅僅在H5頁面中輕量引入的時候會這樣寫：

const { createApp, reactive} = Vue;

那么我們是如何導(dǎo)出這些對象的呢？讓我們來看一下 vue.global.js 文件源碼：

看懂了這個函數(shù)，其實(shí)也就明白了我們是怎么獲取到對象的，這其實(shí)是一個 立即加載函數(shù) 。

手把手教你讀Vue2源碼-2

在上一篇中，我們已經(jīng)學(xué)習(xí)了怎么搭建環(huán)境和查找入口文件、vue初始化方法

這一篇，我們就來學(xué)習(xí)基本的調(diào)試方法，在上篇中，我們已經(jīng)在test文件夾中創(chuàng)建了一個測試文件，我們在瀏覽器中打開這個文件

1. 初始化new Vue()

test1.html文件中在初始化app處打斷點(diǎn)，按F11走下一步查看，可以看到進(jìn)入到我們Vue構(gòu)造函數(shù)，調(diào)用了init方法

2. this.init(options)

同樣打上斷點(diǎn)，點(diǎn)擊下一步，會進(jìn)入init方法

3. this.initMixin

在init方法，初始化了各種屬性。我們將斷點(diǎn)打在合并options的位置，查看一下options合并前后有什么差別：

4. $mount

繼續(xù)，將斷點(diǎn)打到mount方法

5. mountComponent

聲明了updateComponent，創(chuàng)建了Watcher

6. _render()

_render獲取虛擬dom

7. _update()

_update把虛擬dom轉(zhuǎn)為真實(shí)dom

關(guān)于vue源碼全方位解析百度云和vue源碼分析視頻教程的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。