[vue原始碼解析] 解析器
解析器型別：html解析器、文字解析器、注釋解析器
原理：將模版字串按照一定的條件迴圈進行切割，對切割下來的內容進行型別判斷，在生產對應型別的ast節點插入到父節點上，直到切割完畢最終生成一顆ast樹。
邏輯概覽：
/**
* 整體邏輯
*/export
function
parsehtml
(html, options)
//條件注釋
if(conditionalcomment.
test
(html)
)//doctype
const doctypematch = html.
match
(doctype)
if(doctypematch)
//結束標籤
const endtagmatch = html.
match
(endtag)
if(endtagmatch)
//開始標籤
const starttagmatch =
parsetag()
if(starttagmatch)
//以上情況都不是則不是以《開頭的模版字串,找不到對應的ast節點
let text, rest, next
if(textend >=0)
//找不到《符號，則該字串全部為文字
if(textend <0)
if(options.chars && text)
}else}}
}
在這裡舉個例子，比如元素標籤,首先找到《符號，然後通過正規表示式判斷其不是結尾，則將他的自閉合屬性設為true。
在字串擷取生成ast節點過程中，使用棧來維護dom層級，開始標籤進棧，知道結束標籤才能出棧，通過在棧中的進出棧順序便可以明確其dom層級結構。
同時對於文字解析的時候還有乙個需要注意的地方，在vue中，存在帶變數的文字，例如姓名:}，所以在解析文字的時候還需要使用正規表示式進行邏輯判斷並分類處理，其**如下：
/**
* 解析帶變數的文字
**/function
parsetext
(text)
\}/gif(
!tagre.
test
(text)
)const tokens =
let lastindex = tagre.lastindex =
0let match, index
while
((match = tagre.
exec
(text)))
tokens.
push
(`_s($)`
)//_s為tostring函式的別名
lastindex = index + match[0]
.length
}if(lastindex < text.length)
return tokens.
join
('+')}
console.
log(
parsetext
("姓名:},年齡:}"
))
Vue原始碼解析
原始碼位置 src core vdom patch.js updatechildren 作用 key的主要作用是高效的更新虛擬dom，原始碼中在patch的過程中，會執行patchvnode，patchvode過程中會執行updatechildren方法，會更新兩個新舊的子元素，通過key可以準確的...
Vue原始碼解析 優化器
優化器作用 在ast中找出靜態子樹並打上標記 好處 1 每次重新渲染時，不需要為靜態子樹建立新節點。2 在虛擬dom中打補丁 patching 的過程可以跳過。步驟 1 在ast中找出所有靜態節點並打上標記 static true 若當前節點為靜態節點，則其所有子節點也需要為靜態節點。2 在ast中...
vue原始碼解析2 模板解析
從上節的第 5 步，引出模板解析，將el的所有子節點取出,新增到乙個新建的文件fragment物件中，對fragment中的所有層次子節點遞迴進行編譯解析處理。文字節點 從data中取出表示式對應的屬性值，設定為文字節點的textcontent 元素節點 獲取節點屬性，判斷是否是指令 解析指令 fu...