開源框架 WebFirst 一鍵生成專案,線上建表
一、什麼是 vue 生命週期
Vue 例項從建立到銷燬的過程,就是生命週期。也就是從開始建立、初始化資料、編譯模板、掛載Dom→渲染、更新→渲染、解除安裝等一系列過程,我們稱這是 Vue 的生命週期。
二、生命週期函式
Vue 的生命週期總共分為8個階段:建立前/後,載入前/後,更新前/後,銷燬前/後。
1、beforeCreate(建立前)
表示例項完全被創建出來之前,vue 例項的掛載元素$el和資料物件 data 都為 undefined,還未初始化。
2、created(建立後)
資料物件 data 已存在,可以呼叫 methods 中的方法,操作 data 中的資料,但 dom 未生成,$el 未存在 。
3、beforeMount(掛載前)
vue 例項的 $el 和 data 都已初始化,掛載之前為虛擬的 dom節點,模板已經在記憶體中編輯完成了,但是尚未把模板渲染到頁面中。data.message 未替換。
4、mounted(掛載後)
vue 例項掛載完成,data.message 成功渲染。記憶體中的模板,已經真實的掛載到了頁面中,使用者已經可以看到渲染好的頁面了。例項建立期間的最後一個生命週期函式,當執行完 mounted 就表示,例項已經被完全建立好了,DOM 渲染在 mounted 中就已經完成了。
5、beforeUpdate(更新前)
當 data 變化時,會觸發beforeUpdate方法 。data 資料尚未和最新的資料保持同步。
6、updated(更新後)
當 data 變化時,會觸發 updated 方法。頁面和 data 資料已經保持同步了。
7、beforeDestory(銷燬前)
元件銷燬之前呼叫 ,在這一步,例項仍然完全可用。
8、destoryed(銷燬後)
元件銷燬之後呼叫,對 data 的改變不會再觸發周期函式,vue 例項已解除事件監聽和 dom繫結,但 dom 結構依然存在。