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

本文目錄一覽：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

updateChildren 過程為：

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

2、對指針所對應的節(jié)點做一個兩兩比較，判斷是否屬于同一節(jié)點

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

同步更新的github地址：

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

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

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

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

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

main.go

router.go

FPList.go

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

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

vue2.0源碼解析（上）

vue項目地址：

當前版本號：2.6.11

1、基本目錄結構：

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

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

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

滴滴滴，面試官發(fā)來一個面試邀請。接受邀請??

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

在接下來的這篇文章中，我們將講解面試中很愛考的虛擬DOM以及其背后的diff算法。 請認真閱讀本文～文末有學習資源免費共享?。。?

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

要點：虛擬 DOM 是 JS 對象；虛擬 DOM 是對真實 DOM 的描述。

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

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

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

1）sel： 標簽類型，例如 p、div；

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

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

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

5）elm：虛擬節(jié)點綁定的真實 DOM 節(jié)點；

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

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

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

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

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

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

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

然后編寫h函數(shù)，根據(jù)第三個參數(shù)的不同進行不同的響應。

當我們進行比較的過程中，我們采用的4種命中查找策略：

1）新前與舊前：命中則指針同時往后移動。

2）新后與舊后：命中則指針同時往前移動。

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

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

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

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

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

1.什么是Virtual DOM 和Snabbdom

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

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

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

1、零基礎入門或者有一定基礎的同學、大中院校學生

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

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

手把手教你讀Vue2源碼-2

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

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

1. 初始化new Vue()

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

2. this.init(options)

同樣打上斷點，點擊下一步，會進入init方法

3. this.initMixin

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

4. $mount

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

5. mountComponent

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

6. _render()

_render獲取虛擬dom

7. _update()

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

這種VUE代碼 是怎么寫的？

應該是打包工具自動生成的吧。

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

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