任何 Vue App 的 Instance 皆是由 new Vue() 開始建立,並可在傳入的 options object 定義 Instance Lifecycle
Hooks 來自訂各週期呼叫的方法 (圖中白底紅字的部分)
- 首先,初始化 Vue lifecycle 及事件方法
- 呼叫 Instance Lifecycle Hooks 的 beforeCreate 方法,須注意此時 $data 還無法調用
- 初始化注入相依內容及資料綁定
- 呼叫 Instance Lifecycle Hooks 的 created 方法,此時 Instance 已初始化完成,事件與屬性已綁定完成,
$data 已可取得,但尚未掛載 el 且尚未生成 DOM
- 判斷 options 中是否有 el 屬性,若有則繼續進行下一步,若無則等待 .$mount(el) 被呼叫
- 判斷 options 中是否有 template 屬性,若有,編譯之並放入到 render function 中,若無則以 el 的
outerHTML 來編譯
這裡會判斷是否有 render 屬性,若有則優先以 render 來 compile,優先序為 render -> template ->
el 的內容,render 回傳的內容為 VNode (Virtual Node) 物件,並不是實際的 DOM 物件
- 呼叫 Instance Lifecycle Hooks 的 beforeMount 方法,此階段尚未掛載 render 後的內容,尚未將 el 內容
取代
- 將 render 調用後的內容取代 el
- 呼叫 Instance Lifecycle Hooks 的 mounted 方法,此階段已經將 render 的內容取代 el,且 DOM 已經綁定
完成,可以在此階段發送 ajax 來更新頁面資料