今天給各位分享vue商場模板源碼的知識，其中也會對vue商城首頁進行解釋，如果能碰巧解決你現(xiàn)在面臨的問題，別忘了關(guān)注本站，現(xiàn)在開始吧！

本文目錄一覽：

• 1、面試中的網(wǎng)紅Vue源碼解析之虛擬DOM，你知多少呢？深入解讀diff算法
• 2、手把手教你讀Vue2源碼-2
• 3、從零開始Gin Web+Vue商城的搭建（一）-- 前后端框架搭建和簡單溝通

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

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

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

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

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

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

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

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

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

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

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

2）data： 標(biāo)簽上的數(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ù)的不同進行不同的響應(yīng)。

當(dāng)我們進行比較的過程中，我們采用的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、零基礎(chǔ)入門或者有一定基礎(chǔ)的同學(xué)、大中院校學(xué)生

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

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

手把手教你讀Vue2源碼-2

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

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

1. 初始化new Vue()

test1.html文件中在初始化app處打斷點，按F11走下一步查看，可以看到進入到我們Vue構(gòu)造函數(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

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

同步更新的github地址：

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

一、先來實現(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串，知道后臺算是成功了。

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

vue商場模板源碼的介紹就聊到這里吧，感謝你花時間閱讀本站內(nèi)容，更多關(guān)于vue商城首頁、vue商場模板源碼的信息別忘了在本站進行查找喔。