本篇文章給大家談?wù)剉ue商城前端源碼，以及vue 電商網(wǎng)站源碼對(duì)應(yīng)的知識(shí)點(diǎn)，希望對(duì)各位有所幫助，不要忘了收藏本站喔。

本文目錄一覽：

• 1、【面試題解析】從 Vue 源碼分析 key 的作用
• 2、從零開始Gin Web+Vue商城的搭建（一）-- 前后端框架搭建和簡(jiǎn)單溝通
• 3、vue2.0源碼解析（上）
• 4、面試中的網(wǎng)紅Vue源碼解析之虛擬DOM，你知多少呢？深入解讀diff算法
• 5、手把手教你讀Vue2源碼-2
• 6、這種VUE代碼 是怎么寫的？

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

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

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

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

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

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

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

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

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

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

vnode 表示更新后的節(jié)點(diǎn)，oldVnode 表示更新前的節(jié)點(diǎn)，通過對(duì)比新舊節(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)，則會(huì)調(diào)用 patchVnode 觸發(fā)更新

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

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

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

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

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

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

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

updateChildren 過程為：

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

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

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

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

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

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

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

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

希望以上內(nèi)容能夠?qū)Ω魑恍』锇橛兴鶐椭４蠹颐嬖図樌?/p>

Vue 的文檔中對(duì) key 的說明如下：

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

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

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

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

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

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

了解了就地修改，那么我們?cè)谝恍┖?jiǎn)單節(jié)點(diǎn)上可以選擇不綁定 key，從而提高性能。

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

從零開始Gin Web+Vue商城的搭建（一）-- 前后端框架搭建和簡(jiǎn)單溝通

同步更新的github地址：

看了一位老哥寫的《 前后分離Vue+Gin(go)總結(jié) 》以后有種自己搭一份的想法，結(jié)合最近找工作比較閑，就準(zhǔn)備自己寫一份商城源碼。

一、先來實(shí)現(xiàn)前端部分第一步搭建Vue框架。Vue我也是第一次接觸，看了半天多的文檔才有了大概的了解。先不過多考慮前端的實(shí)現(xiàn)，首先考慮一下前后臺(tái)溝通的問題。

用vue-cli搭建一個(gè)新框架，在Helloworld.vue 或者新建一個(gè)模板頁。

老哥的文檔中寫到，他推薦使用axios插件代替jquery來和后臺(tái)做交互。那么我也按照他的思路安裝一個(gè)axios插件，寫一個(gè)跟后臺(tái)通訊的Get請(qǐng)求。

二、然后來搭建后臺(tái)框架，老哥說的是用Gin框架來搭建，并且用cors中間件來解決跨域訪問問題，咱們也先來搭建一個(gè)簡(jiǎn)單的框架。

main.go

router.go

FPList.go

在瀏覽器里輸入localhost:8081/FPList，可以看到剛才自己定義的Json串，知道后臺(tái)算是成功了。

此時(shí)再打開前端頁面，可以看到后臺(tái)返回的結(jié)果已經(jīng)顯示在頁面了。

vue2.0源碼解析（上）

vue項(xiàng)目地址：

當(dāng)前版本號(hào)：2.6.11

1、基本目錄結(jié)構(gòu)：

1、找到initState()函數(shù)，這是初始化響應(yīng)式的入口。

面試中的網(wǎng)紅Vue源碼解析之虛擬DOM，你知多少呢？深入解讀diff算法

眾所周知，在前端的面試中，面試官非常愛考dom和diff算法。比如，可能會(huì)出現(xiàn)在以下場(chǎng)景

滴滴滴，面試官發(fā)來一個(gè)面試邀請(qǐng)。接受邀請(qǐng)??

我們都知道， key 的作用在前端的面試是一道很普遍的題目，但是呢，很多時(shí)候我們都只浮于知識(shí)的表面，而沒有去深挖其原理所在，這個(gè)時(shí)候我們的競(jìng)爭(zhēng)力就在這被拉下了。所以呢，深入學(xué)習(xí)原理對(duì)于提升自身的核心競(jìng)爭(zhēng)力是一個(gè)必不可少的過程。

在接下來的這篇文章中，我們將講解面試中很愛考的虛擬DOM以及其背后的diff算法。 請(qǐng)認(rèn)真閱讀本文～文末有學(xué)習(xí)資源免費(fèi)共享?。?！

虛擬DOM是用JavaScript對(duì)象描述DOM的層次結(jié)構(gòu)。DOM中的一切屬性都在虛擬DOM中有對(duì)應(yīng)的屬性。本質(zhì)上是JS 和 DOM 之間的一個(gè)映射緩存。

要點(diǎn)：虛擬 DOM 是 JS 對(duì)象；虛擬 DOM 是對(duì)真實(shí) DOM 的描述。

diff發(fā)生在虛擬DOM上。diff算法是在新虛擬DOM和老虛擬DOM進(jìn)行diff（精細(xì)化比對(duì)），實(shí)現(xiàn)最小量更新，最后反映到真正的DOM上。

我們前面知道diff算法發(fā)生在虛擬DOM上，而虛擬DOM是如何實(shí)現(xiàn)的呢？實(shí)際上虛擬DOM是有一個(gè)個(gè)虛擬節(jié)點(diǎn)組成。

h函數(shù)用來產(chǎn)生虛擬節(jié)點(diǎn)（vnode）。虛擬節(jié)點(diǎn)有如下的屬性：

1）sel： 標(biāo)簽類型，例如 p、div；

2）data： 標(biāo)簽上的數(shù)據(jù)，例如 style、class、data-*；

3）children ：子節(jié)點(diǎn)；

4） text： 文本內(nèi)容；

5）elm：虛擬節(jié)點(diǎn)綁定的真實(shí) DOM 節(jié)點(diǎn)；

通過h函數(shù)的嵌套，從而得到虛擬DOM樹。

我們編寫了一個(gè)低配版的h函數(shù)，必須傳入3個(gè)參數(shù)，重載較弱。

形態(tài)1：h('div', {}, '文字')

形態(tài)2：h('div', {}, [])

形態(tài)3：h('div', {}, h())

首先定義vnode節(jié)點(diǎn)，實(shí)際上就是把傳入的參數(shù)合成對(duì)象返回。

[圖片上傳失敗...(image-7a9966-1624019394657)]

然后編寫h函數(shù)，根據(jù)第三個(gè)參數(shù)的不同進(jìn)行不同的響應(yīng)。

當(dāng)我們進(jìn)行比較的過程中，我們采用的4種命中查找策略：

1）新前與舊前：命中則指針同時(shí)往后移動(dòng)。

2）新后與舊后：命中則指針同時(shí)往前移動(dòng)。

3）新后與舊前：命中則涉及節(jié)點(diǎn)移動(dòng)，那么新后指向的節(jié)點(diǎn)，移到 舊后之后 。

4）新前與舊后：命中則涉及節(jié)點(diǎn)移動(dòng)，那么新前指向的節(jié)點(diǎn)，移到 舊前之前 。

命中上述4種一種就不在命中判斷了，如果沒有命中，就需要循環(huán)來尋找，移動(dòng)到舊前之前。直到while(新前=新后舊前=就后)不成立則完成。

如果是新節(jié)點(diǎn)先循環(huán)完畢，如果老節(jié)點(diǎn)中還有剩余節(jié)點(diǎn)(舊前和舊后指針中間的節(jié)點(diǎn))，說明他們是要被刪除的節(jié)點(diǎn)。

如果是舊節(jié)點(diǎn)先循環(huán)完畢，說明新節(jié)點(diǎn)中有要插入的節(jié)點(diǎn)。

1.什么是Virtual DOM 和Snabbdom

2.手寫底層源碼h函數(shù)

3.感受Vue核心算法之diff算法

4.snabbdom之核心h函數(shù)的工作原理

1、零基礎(chǔ)入門或者有一定基礎(chǔ)的同學(xué)、大中院校學(xué)生

2、在職從事相關(guān)工作1-2年以及打算轉(zhuǎn)行前端的朋友

3、對(duì)前端開發(fā)有興趣人群

手把手教你讀Vue2源碼-2

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

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

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)擊下一步，會(huì)進(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

這種VUE代碼 是怎么寫的？

應(yīng)該是打包工具自動(dòng)生成的吧。

像這種代碼類似庫源碼，是挺難閱讀的。

關(guān)于vue商城前端源碼和vue 電商網(wǎng)站源碼的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。