導航:首頁 > 源碼編譯 > vue依賴如何看源碼

vue依賴如何看源碼

發布時間:2024-01-05 09:35:48

Ⅰ 面試中的網紅Vue源碼解析之虛擬DOM,你知多少呢深入解讀diff演算法

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

滴滴滴,面試官發來一個面試邀請。接受邀請📞

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

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

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

要點:虛擬 DOM 是 JS 對象;虛擬 DOM 是對真實 DOM 的描述。

diff發生在虛擬DOM上。diff演算法是在新虛擬DOM和老虛擬DOM進行diff(精細化比對),實現最小量更新,最後反映到真正的DOM上。

我們前面知道diff演算法發生在虛擬DOM上,而虛擬DOM是如何實現的呢?實際上虛擬DOM是有一個個虛擬節點組成。

h函數用來產生虛擬節點(vnode)。虛擬節點有如下的屬性:
1)sel: 標簽類型,例如 p、div;
2)data: 標簽上的數據,例如 style、class、data-*;
3)children :子節點;
4) text: 文本內容;
5)elm:虛擬節點綁定的真實 DOM 節點;

通過h函數的嵌套,從而得到虛擬DOM樹。

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

形態1:h('div', {}, '文字')
形態2:h('div', {}, [])
形態3:h('div', {}, h())

首先定義vnode節點,實際上就是把傳入的參數合成對象返回。

[圖片上傳失敗...(image-7a9966-1624019394657)]
然後編寫h函數,根據第三個參數的不同進行不同的響應。

當我們進行比較的過程中,我們採用的4種命中查找策略:
1)新前與舊前:命中則指針同時往後移動。
2)新後與舊後:命中則指針同時往前移動。
3)新後與舊前:命中則涉及節點移動,那麼新後指向的節點,移到 舊後之後
4)新前與舊後:命中則涉及節點移動,那麼新前指向的節點,移到 舊前之前

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

如果是新節點先循環完畢,如果老節點中還有剩餘節點(舊前和舊後指針中間的節點),說明他們是要被刪除的節點。

如果是舊節點先循環完畢,說明新節點中有要插入的節點。

1.什麼是Virtual DOM 和Snabbdom
2.手寫底層源碼h函數
3.感受Vue核心演算法之diff演算法
4.snabbdom之核心h函數的工作原理

1、零基礎入門或者有一定基礎的同學、大中院校學生
2、在職從事相關工作1-2年以及打算轉行前端的朋友
3、對前端開發有興趣人群

Ⅱ vue-lazyload 源碼解析

/src/lazy.js

定義變數接收實例化參數。

lazy.js 默認導出一個函數,該函數返回一個 Lazy 類,形成閉包,保持對 Vue 的引用。

判斷是否支持Webp圖片

/src/listener.js

定義變數接收實例化參數。

filter 方法將配置的 filter 對象中的方法執行,接收兩個參數,一個為 ReactiveListener 實例,一個為 options 參數對象。

initState 方法給元素添加 data-set 屬性,值為圖片地址 src,並且定義了圖片狀態對象 state 。在 Lazy 中已經根據像素比選擇了最適配屏幕的圖片,顧這里不需要考慮 srcset 屬性。另外,我們自定義指令是 v-lazy,到目前為止,還沒有給圖片的 src 屬性賦值。

render 方法,是在 Lazy 中實例化 ReactiveListener 時傳遞過來的參數。

回過頭再來結合 lazy.js 中的 lazyLoadHandler 方法與 ReactiveListener 暴露的方法來看。

/src/lazy-container.js

LazyContainer 的核心是 container 下的選擇器selector(默認 img 標簽)遍歷後調用 lazy 的 add 方法進行綁定,自定義指令 v-lazyload-container。

/src/lazy-component.js

上述實現元素綁定主要是通過自定義指令 v-lazy v-lazy-container 。那麼 LazyComponent 則是通過注冊的 lazy-component 組件,完成綁定,默認渲染成為 div 標簽,作為 img 的容器。

/src/lazy-image.js

通 LazyComponent 組件,只不過 LazyImage 注冊的 lazy-image 組件,渲染成的是 img 標簽,多了 src 屬性。

通過自定義指令 v-lazy 將設置背景圖的元素或者 img元素,通過 _addListenerTarget 方法收集與數組 TargetQueue 中,並遍歷觸發懶載入的方法, addEventListener 綁定在該元素上,觸發的事件為 lazyLoadHandler

在需要懶載入的元素上設置屬性 data-src ,這是期望的圖片地址(filter 配置項可以預先過濾賦值),元素上自定義 lazyLoad 表示圖片狀態(狀態變更後,adapter 中觸發回調);

ListenerQueue 數組中收集的是 ReactiveListener 類的實例,主要是用於懶載入不同狀態下的圖片載入,loading - loaded - error;

當觸發 EventListener 了,執行 lazyLoadHandler 方法,根據演算法,進入 viewport 後, ReactiveListener 元素如果與觸發元素匹配,則進行圖片的載入及渲染。

閱讀全文

與vue依賴如何看源碼相關的資料

熱點內容
怎麼刪除授時伺服器地址 瀏覽:141
android基礎組件 瀏覽:656
建興app怎麼變成黑色了 瀏覽:51
文件壓縮包如何加密文件 瀏覽:183
2010提出的演算法 瀏覽:674
冰櫃壓縮機的壽命 瀏覽:105
辦公室采訪程序員 瀏覽:569
美橙雲伺服器購買 瀏覽:754
漢語詞典pdf下載 瀏覽:353
android公網ip 瀏覽:613
要塞1地圖放哪個文件夾 瀏覽:850
凡科建站怎麼弄伺服器 瀏覽:939
蘋果手機怎麼設置app播放 瀏覽:202
下載網站源碼用什麼瀏覽器 瀏覽:241
六線譜pdf 瀏覽:156
linuxmysqlsock 瀏覽:239
人教版數學pdf下載 瀏覽:460
文檔安全加密系統 瀏覽:492
數控銑床編程簡單數字 瀏覽:788
編程電纜如何重啟 瀏覽:121