Vue虛擬dom原始碼解析

2021-10-12 16:43:50 字數 655 閱讀 1597

vue原始碼解析:虛擬dom比較原理

function patch(oldvnode,vnode)

else

}return vnode.elm

patch()函式接收新舊vnode,oldvnode的elm指向真實dom,vnode的elm為undefined,經過patch方法,vnode的elm也將指向這個更新之後的真實dom

function samevnode(oldvnode,vnode)

新舊vnode不一致,打補丁(增刪改)

function patchvnode(oldvnode, vnode)

//判斷是否為文字節點

if(vnode.text == undefined)

const attrs = vnode.data.attrs ||

// 更新/新增屬性

for(key in attrs)

else}}

// 刪除新節點不存在的屬性

for(key in oldattrs)

}}

Vue原始碼解析 虛擬dom比較原理

通過對 vue2.0 原始碼閱讀,想寫一寫自己的理解,能力有限故從尤大佬2016.4.11第一次提交開始讀,準備陸續寫 其中包含自己的理解和原始碼的分析,盡量通俗易懂!由於是2.0的最早提交,所以和最新版本有很多差異 bug,後續將陸續補充,敬請諒解!包含中文注釋的vue原始碼已上傳.先說一下為什麼...

Vue原始碼解析 虛擬dom比較原理

通過對 vue2.0 原始碼閱讀,想寫一寫自己的理解,能力有限故從尤大佬2016.4.11第一次提交開始讀,準備陸續寫 其中包含自己的理解和原始碼的分析,盡量通俗易懂!由於是2.0的最早提交,所以和最新版本有很多差異 bug,後續將陸續補充,敬請諒解!包含中文注釋的vue原始碼已上傳.先說一下為什麼...

Vue原始碼解析 虛擬dom比較原理

通過對 vue2.0 原始碼閱讀,想寫一寫自己的理解,能力有限故從尤大佬2016.4.11第一次提交開始讀,準備陸續寫 其中包含自己的理解和原始碼的分析,盡量通俗易懂!由於是2.0的最早提交,所以和最新版本有很多差異 bug,後續將陸續補充,敬請諒解!包含中文注釋的vue原始碼已上傳.先說一下為什麼...