## 最近在做的項(xiàng)目前段使用了Vue.js，在開發(fā)過程中對有關(guān)頁面數(shù)據(jù)的初始化以及Vue的內(nèi)置生命周期鉤子的使用有些捉襟見肘，在查看了各大神的博客之后，決定自己總結(jié)一下~

##### 先掛上官網(wǎng)的生命周期圖示

#####? 說說什么是生命周期

我們先來看看百度百科給我們的介紹：生命周期就是指一個對象的生老病死。

很言簡意賅，但這只是一個籠統(tǒng)的概念，當(dāng)然，對于Vue來說，就只有生和死這兩個狀態(tài)，即Vue實(shí)例從創(chuàng)建到銷毀的過程，就稱作生命周期。

同時我們還要注意，在Vue的整個生命周期中，它提供了一系列的內(nèi)置事件，即生命周期鉤子函數(shù)（以下簡稱為鉤子），我們可以在鉤子里注冊自己封裝好的js方法，在Vue的生命周期中不同階段觸發(fā)這些方法，比如實(shí)現(xiàn)頁面數(shù)據(jù)渲染，進(jìn)行各種請求等等。注意，這些鉤子里的this直接指向的是vue的實(shí)例。

讓我們把官網(wǎng)的生命周期示例圖翻譯成中文來看看，到底Vue實(shí)例到底是怎么“生”又如何“死”：

##### 每個鉤子觸發(fā)的階段

beforeCreate：在Vue實(shí)例創(chuàng)建之前，數(shù)據(jù)觀測(data observer) 和 event/watcher 事件配置之前觸發(fā)。

created：Vue實(shí)例已經(jīng)創(chuàng)建完成之后觸發(fā)。此時實(shí)例已完成以下配置：數(shù)據(jù)觀測(data observer)，屬性和方法的運(yùn)算， watch/event 事件回調(diào)。此鉤子通常用于初始化某些屬性值。

beforeMount：在掛載開始之前被觸發(fā)，相關(guān)的 render 函數(shù)首次被調(diào)用。

mounted：el 被新創(chuàng)建的 vm.$el 替換，并掛載到實(shí)例上去之后觸發(fā)該鉤子。通常是初始化頁面完成后，再對html的dom節(jié)點(diǎn)進(jìn)行一些需要的操作，如數(shù)據(jù)的顯示等等。

beforeUpdate：數(shù)據(jù)更新時觸發(fā)，發(fā)生在虛擬dom重新渲染和打補(bǔ)丁之前。 你可以在這個鉤子中進(jìn)一步地更改狀態(tài)，不會觸發(fā)附加的重渲染過程。

updated：在數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁完成之后觸發(fā)。

beforeDestroy：Vue實(shí)例銷毀之前觸發(fā)。但在這一步，實(shí)例仍然完全可用。

destroyed：Vue實(shí)例銷毀后觸發(fā)。在此之后，Vue 實(shí)例指示的所有東西都會解綁，所有的事件監(jiān)聽器會被移除，所有的子實(shí)例也會被銷毀。該鉤子在服務(wù)器端渲染期間不被調(diào)用。

##### created與mounted

在項(xiàng)目開發(fā)過程中最常使用的就是這兩個鉤子，根據(jù)上圖我們能理解到：created鉤子被觸發(fā)時，html頁面還未被渲染，僅僅只是Vue實(shí)例創(chuàng)建好了而已；而mounted鉤子觸發(fā)時html頁面已經(jīng)被渲染完成。

所以在開發(fā)過程中：

created鉤子一般用于初始化一些基礎(chǔ)的數(shù)據(jù)，如實(shí)體數(shù)據(jù)等等。

mounted鉤子用于一些需要操作dom節(jié)點(diǎn)的方法，如圖表插件echarts，初始化它們一般需要用到document.getElementById("id")這種形式，如果用在created中，html還未被渲染，頁面是找不到這個節(jié)點(diǎn)的，在mounted中調(diào)用便可成功實(shí)現(xiàn)。

##### 以上就是開發(fā)過程中本人對Vue實(shí)例生命周期以及相關(guān)鉤子函數(shù)的理解

##### 如果有不對的地方，請各位指正！