vue之 template 模板編譯 理解

2021-08-20 12:47:56 字數 331 閱讀 4111

通過通過compile編譯器把template編譯成ast語法樹,ast會經過generate(將ast語法樹轉化成render function字串的過程)得到render函式,render的返回值是vnode,vnode是vue的虛擬dom節點,裡面包含(標籤名、子節點、文字等);

然後進行真實dom的渲染 

首先compile編譯器

通過pase方法將我們傳入的template中的內容,轉換為ast語法樹

optimize對當前抽象語法樹進行優化,標識出靜態節點

generate將我們的抽象語法樹,轉換為對應的render方法的字串

返回虛擬dom

Vue 的 template 模板相關語法

目錄 1 vue 模板的特點 2 內容展示方面 v text v html v pre 3 繫結屬性方面 v bind 縮寫為 4 繫結事件方面 v on 縮寫為 5 條件判斷指令 v if v else 6 迴圈指令 v for key index 7 顯示與隱藏 v show 8 v cloak...

設計模式之模板設計(Template)

模版模式,又被稱為模版方法模式,它可以將工作流程進行封裝,並且對外提供了個性化的控制,但主流程外界不能修改,也就是說,模版方法模式中,將工作的主體架構規定好,具體類可以根據自己的需要,各自去實現,這可能會讓我們想到策略模式,兩者有著本質的區別。1 主流程相同,多個類區別在於主流程中的某個細節不同 2...

模板 Template 模式

模板 template 模式 模板模式是類的行為模式。1.定義 定義乙個操作中演算法的骨架 或稱為頂級邏輯 將一些步驟 或稱為基本方法 的執行延遲到其子類中.2.模板模式與繼承 模板方法估計恰當地使用繼承。此模式可以用來改寫一些擁有相同功能的相關的類,將可復用的一般性行為 移到基類裡面,而把特殊化的...