vue3.0 AST 對象根節點其實是一個虛擬節點,它並不會映射到一個具體節點,另外它還包含了其他的一些屬性,這些屬性在后續的 AST 轉換的過程中會賦值,並在生成代碼階段用到。
那么,為什么要設計一個虛擬節點呢?
因為 Vue.js 3.0 和 Vue.js 2.x 有一個很大的不同——Vue.js 3.0 支持了 Fragment 的語法,即組件可以有多個根節點,比如:
<img src="./logo.jpg">
<hello :msg="msg"></hello>
這種寫法在 Vue.js 2.x 中會報錯,提示模板只能有一個根節點,而 Vue.js 3.0 允許了這種寫法。但是對於一棵樹而言,必須有一個根節點,所以虛擬節點在這種場景下就非常有用了,它可以作為 AST 的根節點,然后其 children 包含了 img 和 hello 的節點。