Vue2 0 生命週期和鉤子函式的一些理解

在使用vue乙個多禮拜後，感覺現在還停留在初級階段，雖然知道怎麼和後端做資料互動，但是對於mounted這個掛載還不是很清楚的。放大之，對vue的生命週期不甚了解。只知道簡單的使用，而不知道為什麼，這對後面的踩坑是相當不利的。

因為我們有時候會在幾個鉤子函式裡做一些事情，什麼時候做，在哪個函式裡做，我們不清楚。

於是我開始先去搜尋，發現vue2.0的生命週期沒啥文章。大多是1.0的版本介紹。最後還是找到一篇不錯的（會放在最後）

咱們從上圖可以很明顯的看出現在vue2.0都包括了哪些生命週期的函式了。

對於執行順序和什麼時候執行，看上面兩個圖基本有個了解了。下面我們將結合**去看看鉤子函式的執行。

ps:下面**可以直接複製出去執行

data: ,

beforecreate: function () ,
created: function () ,
beforemount: function () ,
mounted: function () ,
beforeupdate: function () ,
updated: function () ,
beforedestroy: function () ,
destroyed: function () 
})

beforecreated：el 和 data 並未初始化 

created:完成了 data 資料的初始化，el沒有

beforemount：完成了 el 和 data 初始化 

mounted：完成掛載

另外在標紅處，我們能發現el還是 }，這裡就是應用的virtual dom（虛擬dom）技術，先把坑佔住了。到後面mounted掛載的時候再把值渲染進去。

下面就能看到data裡的值被修改後，將會觸發update的操作。

destroy 相關

有關於銷毀，暫時還不是很清楚。我們在console裡執行下命令對 vue例項進行銷毀。銷毀完成後，我們再重新改變message的值，vue不再對此動作進行響應了。但是原先生成的dom元素還存在，可以這麼理解，執行了destroy操作，後續就不再受vue控制了。

這麼多鉤子函式，我們怎麼用呢，我想大家可能有這樣的疑問吧，我也有，哈哈哈。

beforecreate: 舉個栗子：可以在這加個loading事件 

created：在這結束loading，還做一些初始化，實現函式自執行 

mounted： 在這發起後端請求，拿回資料，配合路由鉤子做一些事情

本文是乙個vue的生命週期的理解，如有錯誤還請大牛指正，讓小子也有得進步。

如果對你有所幫助，那是我最大的榮幸。

對了，兄台，對你有幫助的話不妨點個收藏或者推薦再走。

vue 2 0的生命週期 鉤子函式

首先大致看一下官網生命週期圖 鉤子函式 觸發的行為 在此階段可以做的事情 beforecreadted vue例項的掛載元素 el和資料物件data都為undefined，還未初始化。加loading事件 created vue例項的資料物件data有了，el還沒有 結束loading 請求資料為m...

Vue2 0生命週期和鉤子函式的一些理解

前言 鉤子就好像是把人的出生到死亡分成乙個個階段，你肯定是在出生階段起名字，而不會在成年或者死亡的階段去起名字。或者說你想在出生階段去 也是不行的。元件也是一樣，每個階段它的內部構造是不一樣的。所以一般特定的鉤子做特定的事，比如ajax獲取資料就可以在mounted階段。一 vue生命週期簡介 咱們...

Vue 3 生命週期鉤子函式

可以直接匯入on 一族的函式來註冊生命週期鉤子 import from vue const mycomponent onupdated onunmounted 這些生命週期鉤子註冊函式只能在setup 期間同步使用，因為它們依賴於內部的全域性狀態來定位當前元件例項 正在呼叫 setup 的元件例項 ...