VUE 生命週期

生命週期圖示（來自 vue 官網）

一、 建立前（beforeCreate）：對應鉤子函數是 beforeCreate, 實例初始化階段，數據觀察和事件機制都尚未造成，不能獲取到DOM  節點

二、 建立後 （created）： 對應鉤子函數是Created, vue 實例已建立，可是仍是不能獲取 DOM 節點

三、 載入前 （beforeMount）： 對應鉤子函數 beforeMount, 仍然不能獲取 DOM 元素，此時 vue 的根元素已經建立，下面 vue 對 DOM 的操做將圍繞這個根節點展開。beforeMount 是過渡性階段，一個項目通常只能用一次

四、 載入後 （mounted）： 對應鉤子函數 mounted, 使用得最多的鉤子函數， 通常的異步請求都寫在這裏，此時的vue 和 DOM 都已經渲染出來了

五、 更新前 （beforeUpdate）： 對應鉤子函數 beforeUpdate, VUE 遵循數據驅動 DOM 的原則， beforeUpdate 函數在數據更新後雖然沒有當即更新數據，可是 DOM 的數據會改變，這是 VUE 雙向數據綁定的做用

六、 更新後 （updated）： 對應鉤子函數 updated，DOM 會同步更改過的內容

七、銷燬前 （beforeDestroy）： 對應鉤子函數 beforeDestroy, 在上一階段 VUE 已經成功經過 數據驅動DOM 更新,當咱們再也不須要 VUE 操縱 DOM, 就須要銷燬，也就是清除 VUE 與 DOM 的關聯，調用 destroy方法 能夠銷燬當前組件，在銷燬前，會調用 beforeDestroy 鉤子函數

八、 銷燬後 （destroyed）： 對應鉤子函數 destroy， 銷燬後，會調用 destroyed 鉤子函數