Vue實例生命週期詳解

vue的生命週期的含義實質上就是一個實例從建立到銷燬的一系列能夠進行的操做

初始化階段

var vm = new Vue({
  // 選項
})

其中VM是(ViewModel)的縮寫，常常用來表示Vue實例，而new Vue()表示建立了一個Vue的實例

實例建立後，會初始化一個空的Vue實例對象，可是這個時候，這個實例對象上只有默認的一些生命週期函數和默認的事件，其餘都未建立
而後出現第一個生命週期鉤子

beforeCreate

這個鉤子執行時，Vue實例的data和methods中的數據尚未初始化，因此能夠認爲beforeCreate是實例數據綁定以前的鉤子

初始化空的Vue實例後，緊接着data和methods也被初始化，產生了第二個生命週期鉤子

create

create是data和methods數據綁定後產生的鉤子，因此若是調用methods和data中的數據，最先只能在create中操做

這兩個生命週期完畢後，Vue實例就初始化完畢了

---

掛載階段

Vue實例初始化完畢後，Vue開始編輯模板，把Vue代碼中使用的指令進行執行，最終在內存中生成一個編譯好的模板字符串，而後把這個模板字符串，渲染爲內存中的DOM，此時，內存中以及存在了渲染好的模板，可是尚未真正的掛載到頁面中，因此頁面仍舊是舊的頁面

執行指令 > 生成模板字符串 > 渲染爲DOM > 未掛載

beforeMount

這個生命週期鉤子執行的那一刻就是內存中已經存在了渲染好的DMO可是認爲掛載到頁面去，咱們能夠在頁面還沒掛載前，先初始化頁面要顯示的數據

執行後，已經把編譯後模板掛載到 el 節點上去了，產生了下一個生命週期

mount

這個鉤子執行時，咱們能夠經過某些插件操做頁面的DOM節點，要作mount中進行

---

運行階段

這個週期是實例在 生命運行 中的狀態，中有兩個生命週期鉤子，在中間會用新的數據渲染出新的內存DOM樹，當新的DOM樹被更新後，會把新的DOM樹從新加到頁面中
數據從Model層 > View(視圖)

*beforeUpdata

當執行這個狀態時，頁面顯示的仍然是舊的數據，此時數據是新的，頁面顯示數據未與最新數據保持一致

Updata

當執行這個狀態時，頁面顯示數據和最新的數據已經保持同步

---

銷燬階段

此時有兩個生命週期鉤子可以使用

beforeDestroy

執行這個鉤子函數時，Vue實例已經從運行階段到了銷燬階段，但實例上全部的data和全部的methods，以及過濾器，指令，都屬於可用狀態，尚未真正執行銷燬過程

destroyed

當執行這個鉤子函數時，組件以及徹底被銷燬，此時組件中的全部，methods，data，監聽器，過濾器，都沒法使用

至此，整個Vue實例完成它的工做，被清除出內存