Vue中的生命周期和生命周期中的鈎子函數

每個Vue執行個體或者元件被建立的時候，都會經過一系列的底層代碼實作。而vue執行個體或者元件的生命周期大緻可以分為三個時間段：

初始化、運作中、銷毀

下面引用一張vue官方網站的插圖

1、初始化

初始化階段我們會去new一個執行個體或者一個元件，在裡面配置一些資料。

第一個鈎子函數

beforeCreate

這個鈎子函數在初始化階段就會立即執行（不需要調用）

但是這個函數拿不到執行個體或者元件中的資料，此時此刻，頁面中dom和虛拟dom都沒有挂載出來，是以這個鈎子 基本沒啥用。。。

第二個鈎子函數

created

這個函數執行的時候，内部資料已經可以拿到了，但是dom還沒有挂載出來，是以在這個函數中同步的更改資料，運作階段的鈎子函數是不會執行的，并且dom也沒有渲染，在這個函數中也拿不到dom節點。這個函數中 可以寫ajax和一些事件的綁定操作。

第三個鈎子函數

beforeMount

這個函數和第二個鈎子函數差不多，這個時候開始去判斷是執行個體還是元件

也可以進行發送請求和事件綁定

第四個鈎子函數

mounted

這個時刻，生成好了虛拟dom，并且在vue中又一個render函數，将虛拟dom初始化渲染為真實dom，那麼這個函數就能拿到頁面上的真實dom了。

運作中

第五個鈎子函數

beforeUpdate

這個時候，如果對資料進行更改，那麼就會觸發這個函數（自己不會觸發），然後vue内部用diff算法更新虛拟dom，再将虛拟dom不同的地方渲染，但是這個函數拿不到重新渲染的dom

第六個鈎子函數

updated

這個函數就是，等一切都完畢了，更改的資料也渲染成真實dom了之後，才會觸發，能拿到所有的東西。

第七個鈎子函數

beforeDestory

當這個元件或執行個體要銷毀的時候觸發，

但函數中還沒有真正銷毀，可以詢問是否銷毀

第六個鈎子函數

destoryed

這個函數執行了，那麼生命就到 了盡頭，元件或者執行個體就銷毀完成了，接觸了事件和定時器等操作，但是dom依然存在