Vue的生命周期

引言

Vue生命周期圖示

代碼演示

總結

引言

在使用vue進行日常開發(fā)中，我們總有這樣的需求，想在頁面剛一加載出這個表格組件時，就發(fā)送請求去后臺拉取數(shù)據，亦或者想在組件加載前顯示個loading圖，當組件加載出來就讓這個loading圖消失等等這樣或那樣的需求。

要實現(xiàn)這些需求，最重要的一點就是我怎么知道這個組件什么時候加載，換句話說我該什么時候向后臺發(fā)送請求，為了解決這種問題，組件的生命周期鉤子函數(shù)就應運而生。

Vue生命周期圖示

下面這張圖，就是Vue官網給展示的Vue生命周期圖：

下面是官方文檔給出的一個組件從被創(chuàng)建出來到最后被銷毀所要經歷的一系列過程，所以這個過程也叫做一個組件的生命周期圖。從圖中我們可以看到，一個組件從被創(chuàng)建到最后被銷毀，總共要經歷以下8個過程：

beforeCreate:組件實例創(chuàng)建之前

created：組件實例創(chuàng)建完畢

beforeMount：組件DOM掛載之前

mounted：組件DOM掛載完畢

beforeUpate：組件數(shù)據更新之前

updated：組件數(shù)據更新完畢

beforeDestoy：組件實例銷毀之前

destoyed：組件實例銷毀完畢

代碼演示

演示代碼：