Vue教程之Vue實例的生命周期

一.什么是生命周期

Vue 實例有一個完整的生命周期，也就是從開始創建、初始化數據、編譯模板、掛載 DOM、渲染→更新→渲染、卸載等一系列過程，我們稱這是 Vue 的生命周期。通俗說就是 Vue 實例從創建到銷毀的過程，就是生命周期。

在 Vue 的整個生命周期中，它提供了一系列的事件，可以讓我們在事件觸發時注冊 JS 方法，可以讓我們用自己注冊的 JS 方法控制整個大局，在這些事件響應方法中的 this 直接指向的是 Vue 的實例。

(相關資料圖)

?

?

特別值得注意的是??created???鉤子函數和??mounted??鉤子函數的區別

二.鉤子函數的觸發時機

1. beforeCreate

在實例初始化之后，數據觀測(data observer) 和 event/watcher 事件配置之前被調用。

2. created

實例已經創建完成之后被調用。在這一步，實例已完成以下的配置：數據觀測(data observer)，屬性和方法的運算， watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。

3. beforeMount

在掛載開始之前被調用：相關的 render 函數首次被調用。

4. mounted

el 被新創建的 vm.$el 替換，并掛載到實例上去之后調用該鉤子。

5. beforeUpdate

數據更新時調用，發生在虛擬 DOM 重新渲染和打補丁之前。 你可以在這個鉤子中進一步地更改狀態，這不會觸發附加的重渲染過程。

6. updated

由于數據更改導致的虛擬 DOM 重新渲染和打補丁，在這之后會調用該鉤子。

當這個鉤子被調用時，組件 DOM 已經更新，所以你現在可以執行依賴于 DOM 的操作。然而在大多數情況下，你應該避免在此期間更改狀態，因為這可能會導致更新無限循環。該鉤子在服務器端渲染期間不被調用。

7. beforeDestroy

實例銷毀之前調用。在這一步，實例仍然完全可用。

8. destroyed

Vue 實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。該鉤子在服務器端渲染期間不被調用。

三. Vue生命周期實例詳解

首先，每個Vue實例在被創建之前都要經過一系列的初始化過程,這個過程就是vue的生命周期。首先看一張圖吧~這是官方文檔上的圖片相信大家一定都會很熟悉：

?

可以看到在vue一整個的生命周期中會有很多鉤子函數提供給我們在vue生命周期不同的時刻進行操作, 那么先列出所有的鉤子函數，然后我們再一一詳解:

beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestroydestroyed

先來一波代碼，各位復制在瀏覽器中運行，打開console查看就行了：

          <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>  
    
{{message}}
  
<script>  var vm = new Vue({    el: "#app",    data: {      message: "Vue的生命周期"    },    beforeCreate: function() {      console.group("------beforeCreate創建前狀態------");      console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined      console.log("%c%s", "color:red","data   : " + this.$data); //undefined       console.log("%c%s", "color:red","message: " + this.message)     },    created: function() {      console.group("------created創建完畢狀態------");      console.log("%c%s", "color:red","el     : " + this.$el); //undefined      console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化       console.log("%c%s", "color:red","message: " + this.message); //已被初始化    },    beforeMount: function() {      console.group("------beforeMount掛載前狀態------");      console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化      console.log(this.$el);      console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化        console.log("%c%s", "color:red","message: " + this.message); //已被初始化      },    mounted: function() {      console.group("------mounted 掛載結束狀態------");      console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化      console.log(this.$el);          console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化      console.log("%c%s", "color:red","message: " + this.message); //已被初始化     },    beforeUpdate: function () {      console.group("beforeUpdate 更新前狀態===============》");      console.log("%c%s", "color:red","el     : " + this.$el);      console.log(this.$el);         console.log("%c%s", "color:red","data   : " + this.$data);       console.log("%c%s", "color:red","message: " + this.message);     },    updated: function () {      console.group("updated 更新完成狀態===============》");      console.log("%c%s", "color:red","el     : " + this.$el);      console.log(this.$el);       console.log("%c%s", "color:red","data   : " + this.$data);       console.log("%c%s", "color:red","message: " + this.message);     },    beforeDestroy: function () {      console.group("beforeDestroy 銷毀前狀態===============》");      console.log("%c%s", "color:red","el     : " + this.$el);      console.log(this.$el);          console.log("%c%s", "color:red","data   : " + this.$data);       console.log("%c%s", "color:red","message: " + this.message);     },    destroyed: function () {      console.group("destroyed 銷毀完成狀態===============》");      console.log("%c%s", "color:red","el     : " + this.$el);      console.log(this.$el);        console.log("%c%s", "color:red","data   : " + this.$data);       console.log("%c%s", "color:red","message: " + this.message)    }  })</script>

運行后打開console可以看到打印出來內容如下:

?

可以看到一個vue實例在創建過程中調用的幾個生命周期鉤子。

1. 在beforeCreate和created鉤子函數之間的生命周期

在這個生命周期之間，進行初始化事件，進行數據的觀測，可以看到在created的時候數據已經和data屬性進行綁定（放在data中的屬性當值發生改變的同時，視圖也會改變）。 注意看下：此時還是沒有el選項

2. created鉤子函數和beforeMount間的生命周期

?

在這一階段發生的事情還是比較多的。

首先會判斷對象是否有el選項。如果有的話就繼續向下編譯，如果沒有el選項，則停止編譯，也就意味著停止了生命周期，直到在該vue實例上調用vm.$mount(el)。此時注釋掉代碼中:

el: "#app",

然后運行可以看到到created的時候就停止了：

?

如果我們在后面繼續調用vm.$mount(el),可以發現代碼繼續向下執行了

vm.$mount(el) //這個el參數就是掛在的dom接點

?

然后，我們往下看，template參數選項的有無對生命周期的影響。

（1）.如果vue實例對象中有template參數選項，則將其作為模板編譯成render函數。（2）.如果沒有template選項，則將外部HTML作為模板編譯。（3）.可以看到template中的模板優先級要高于outer HTML的優先級。

修改代碼如下, 在HTML結構中增加了一串html，在vue對象中增加了template選項：

          <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>  
        
{{message + "這是在outer HTML中的"}}
  
<script>  var vm = new Vue({    el: "#app",    template: "
{{message +"這是在template中的"}}
", //在vue配置項中修改的    data: {      message: "Vue的生命周期"    }</script>

執行后的結果可以看到在頁面中顯示的是：

?那么將vue對象中template的選項注釋掉后打印如下信息：

這下就可以想想什么el的判斷要在template之前了~是因為vue需要通過el找到對應的outer template。

在vue對象中還有一個render函數，它是以createElement作為參數，然后做渲染操作，而且我們可以直接嵌入JSX.

new Vue({    el: "#app",    render: function(createElement) {        return createElement("h1", "this is createElement")    }})

可以看到頁面中渲染的是：

所以綜合排名優先級： render函數選項 > template選項 > outer HTML.

3. beforeMount和mounted 鉤子函數間的生命周期

可以看到此時是給vue實例對象添加$el成員，并且替換掉掛在的DOM元素。因為在之前console中打印的結果可以看到beforeMount之前el上還是undefined。

4. mounted

注意看下面截圖：

?

在mounted之前h1中還是通過{{message}}進行占位的，因為此時還有掛在到頁面上，還是JavaScript中的虛擬DOM形式存在的。在mounted之后可以看到h1中的內容發生了變化。

5. beforeUpdate鉤子函數和updated鉤子函數間的生命周期

?

當vue發現data中的數據發生了改變，會觸發對應組件的重新渲染，先后調用beforeUpdate和updated鉤子函數。我們在console中輸入：

vm.message = "觸發組件更新"

發現觸發了組件的更新：

?

6. beforeDestroy和destroyed鉤子函數間的生命周期

?

beforeDestroy鉤子函數在實例銷毀之前調用。在這一步，實例仍然完全可用。 destroyed鉤子函數在Vue 實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。