Vue.js 源碼分析——虛擬 DOM

回顧

  • 虛擬DOM庫 - Snabbdom
  • 什么是虛擬DOM
    • 虛擬DOM（Virtual Dom ）是使用JavaScript對(duì)象描述真實(shí)的DOM
  • Vue.js中的虛擬DOM借鑒Snabbdom，并添加了vue.js的特性
    • 例如：指令和組件機(jī)制
  • 為什么要使用虛擬DOM
    • 避免直接操作DOM，提高開發(fā)效率
    • 作為一個(gè)中間層可以跨平臺(tái)
    • 虛擬DOM不一定可以提高性能 。首次渲染的時(shí)候回增加開銷。復(fù)雜視圖情況下提升渲染性能

一、h函數(shù)

  • vm.$createElement(tag,data,children,normalizeChildren)
    • tag：標(biāo)簽名稱或者組件對(duì)象
    • data：描述tag,可以設(shè)置DOM的屬性或者標(biāo)簽的屬性
    • children：tag中的文本內(nèi)容或者子節(jié)點(diǎn)
  • h()函數(shù)的返回結(jié)果是VNode
  • VNode的核心
    • tag：也就是調(diào)用h()函數(shù)時(shí)候傳入的tag
    • data：也就是調(diào)用h()函數(shù)時(shí)候傳入的data
    • children：也就是調(diào)用h()函數(shù)時(shí)候傳入的children
    • text：屬性
    • elm：記錄真實(shí)DOM
    • key：復(fù)用當(dāng)前的這個(gè)元素
二、整體過程分析
image.png

image.png

image.png

image.png
三、VNode
  • 創(chuàng)建過程核心—— createElement
  • 處理過程—— update（判斷是否有prevVnode,如果沒有就是首次渲染調(diào)用patch方法傳入vm.$el,如果有prevVNode，說明是數(shù)據(jù)更新的時(shí)候，調(diào)用patch方法傳入oldvnode,和newVnode）
四、patch 函數(shù)

-Snabbdom 中的VNode


image.png

-Snabbdom中的patch


image.png

  • Vue.js 中patch的初始化
    src/platforms/web/runtime/index.js


    image.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容