vue3.0允許一個組件有多個根節點


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 的節點。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM