vue模板編譯(原理篇)

概念

平時使用模板時,可以在模板中使用變量、表達式或者指令等,這些語法在html中是不存在的,那vue中爲什麼可以實現?這就歸功於模板編譯功能。
模板編譯的作用是生成渲染函數,通過執行渲染函數生成最新的vnode,最後根據vnode進行渲染。那麼,如何將模板編譯成渲染函數?

將模板編譯成渲染函數

此過程可以分成兩個步驟:先將模板解析成AST(abstract syntax tree,抽象語法樹),然後使用AST生成渲染函數。
由於靜態節點不需要總是重新渲染,所以生成AST之後,生成渲染函數之前這個階段,需要做一個優化操作:遍歷一遍AST,給所有靜態節點做一個標記,這樣在虛擬DOM中更新節點時,如果發現這個節點有這個標記,就不會重新渲染它。
所以,在大體邏輯上,模板編譯分三部分內容:
1、將模板解析成AST
2、遍歷AST標記靜態節點
3、使用AST生成渲染函數
這三部分內容在模板編譯中分別抽象出三個模塊實現各自的功能:解析器、優化器和代碼生成器。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章