一、初始化實例
在Vue渲染過程的開始階段,首先需要進行實例化操作,即建立Vue實例。
這個過程中,Vue會將數據對象進行響應式處理,即將數據對象變成Observer對象,並添加監聽器,使得數據模型變化時,能夠及時地通知視圖層。這也是實現Vue雙向數據綁定的基礎。
示例代碼:
new Vue({ el: '#app', data: { message: 'Hello Vue!' } })
二、編譯模板
在實例化完成後,Vue會對模板進行編譯,將模板轉化為虛擬DOM樹。
Vue中使用的是基於HTML的模板語法,模板會被解析成抽象語法樹,然後再轉化為虛擬DOM樹。
Vue編譯過程中主要包括以下幾個步驟:
1、解析模板,生成AST(抽象語法樹)。
2、標記靜態根節點。
3、遍歷AST,為每個靜態節點打上標記。
4、把帶變數的節點作為動態節點,為其打上標記。
5、根據AST生成渲染函數。
示例代碼:
{{ message }}
原創文章,作者:WJIZL,如若轉載,請註明出處:https://www.506064.com/zh-tw/n/361987.html