類vue將template轉vnode全流程,模板爲html
<div id="abc"><p class="www">{{msg}}</p><p class="hhh"><span>{{msg1}}</span></p></div>
起始標籤的匹配細節vue
<div id="abc">
{tagName: "div", attrs: 0: [" id="abc"", "id", "=", "abc", undefined, undefined, index: 0, input: " id="abc"><p class="www">{{msg}}</p><p class="hhh"><span>{{msg1}}</span></p></div>", groups: undefined], start: 0, end: 14}
attrsMap:{id: "abc"} children:[] parent:undefined tag:"div" type:1
子元素標籤的匹配node
因爲模板還沒遍歷完畢,繼續執行parseHTML,此時模板git
html = "<p class="www">{{msg}}</p><p class="hhh"><span>{{msg1}}</span></p></div>"
文本匹配github
html = "{{msg}}</p><p class="hhh"><span>{{msg1}}</span></p></div>"
var text = (void 0), rest = (void 0), next = (void 0);
除了防止被重寫外,還能夠減小字節。void 0代替undefined省3個字節。{type: 2, expression: "_s(msg)+_s(msg)", text: "{{msg}}"}
閉合標籤匹配express
處理完該閉合標籤後將stack長度減一併把currentParent指向最後一位,即閉合標籤的父級,由於此時最高級div標籤的elemnet的children已經完成了p標籤的導入segmentfault
{attrs:[{…}] attrsList:[{…}] attrsMap:{id: "abc"} children:Array(1)0:{type: 1, tag: "p", attrsList: Array(1), attrsMap: {…}, parent: {…}, …} parent:undefined tag:"div" type:1}
參考文獻:Vue源碼解析之Template轉化爲AST
倉庫:https://github.com/eeeeeeeaso...數組