一文搞懂Vue八大生命週期勾點函數

2023-03-29 06:01:11

一.速識概念：

我們把一個物件從生成（new）到被銷燬（destory）的過程，稱為生命週期。而生命週期函數，就是在某個時刻會自動執行的函數。
按照官方的原話，就是每個 Vue 範例在被建立時都要經過一系列的初始化過程——例如，需要設定資料監聽、編譯模板、將範例掛載到 DOM 並在資料變化時更新 DOM 等。同時在這個過程中也會執行一些叫做生命週期勾點的函數，這給了使用者在不同階段新增自己的程式碼的機會。
簡單來說就是每個Vue範例在被建立時都要經過一系列的初始化過程：建立範例，裝載模板，渲染模板等。Vue為生命週期中的每個狀態都設定了勾點函數(監聽函數) 。每當Vue範例處於不同的生命週期時，對應的函數就會被觸發呼叫。

二.八大生命週期勾點函數：

函數	呼叫時間
beforeCreate	vue範例初始化之前呼叫
created	vue範例初始化之後呼叫
beforeMount	掛載到DOM樹之前呼叫
mounted	掛載到DOM樹之後呼叫
beforeUpdate	資料更新之前呼叫
updated	資料更新之後呼叫
beforeDestroy	vue範例銷燬之前呼叫
destroyed	vue範例銷燬之後呼叫

下面是官方檔案裡的生命週期圖，英語好的同學可以看看：

三.結合程式碼瞭解：

先看案例基本程式碼如下，後面通過如下程式碼步驟演示一個物件從生成到被銷燬的過程各階段執行的生命週期函數。注意show函數的作用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{information}}
    </div>
    <script type="text/javascript">
       //建立vue範例
       var vm = new Vue({
           el: '#app',
           data: {
               information: '北極光之夜。' 
           }
       })
       // 各個生命週期函數通過呼叫下面這個函數了解其所處的生命階段
       function show(inf,obj){
          console.log(inf);
          console.log("------------------------------------------");
          console.log('獲取vue範例data裡的資料:');
          console.log(obj.information);
          console.log("------------------------------------------");
          console.log('掛載的物件，就是DOM：');
          console.log(obj.$el);
          console.log("------------------------------------------");
          console.log('頁面上已經掛載的DOM：');
          console.log(document.getElementById('app').innerHTML);
       }

    </script>

1. beforeCreate：

這個階段vue範例剛剛在記憶體中建立，此時data和methods這些都沒初始化好。
在案例中新增beforeCreate勾點函數：

 var vm = new Vue({
           el: '#app',
           data: {
               information: '北極光之夜。' 
           },
           beforeCreate: function(){
             // 傳入該階段簡介與this，this就是該階段的vue範例
                  show('vue範例初始化之前',this);
           }
       })

看執行結果：

可以看到，此時vue範例剛剛在記憶體中建立，其它什麼都undefined。

2.created：

這個階段vue範例在記憶體中已經建立好了，data和methods也能夠獲取到了，但是模板還沒編譯。
在案例中新增created勾點函數：

 var vm = new Vue({
           el: '#app',
           data: {
               information: '北極光之夜。' 
           },
           created: function(){
                  show('vue範例初始化之後',this);
           }
       })

看結果：

看到沒，已經知道data裡的資料了。其它的話都沒。

3.beforeMount：

這個階段完成了模板的編譯，但是還沒掛載到頁面上。
在案例中新增勾點函數：

 var vm = new Vue({
           el: '#app',
           data: {
               information: '北極光之夜。' 
           },
           beforeMount: function(){
             show('掛載之前',this);
           }
       })

看結果：

看到沒，要掛載的物件都編譯好了，但是頁面的DOM樹還沒掛上去，這個階段頁面還沒能顯示出來。

4.mounted：

這個階段，模板編譯好了，也掛載到頁面中了，頁面也可以顯示了。
在案例中新增勾點函數：

  var vm = new Vue({
           el: '#app',
           data: {
               information: '北極光之夜。' 
           },
           mounted: function(){
            show('掛載之後',this);
           }
       })

看結果：

5.beforeUpdate:

轉態更新之前執行此函數，此時data中資料的狀態值已經更新為最新的，但是頁面上顯示的資料還是最原始的，還沒有重新開始渲染DOM樹。

先改變data裡資料：

vm.information = '南極光之夜';

在案例中新增勾點函數：

 var vm = new Vue({
           el: '#app',
           data: {
               information: '北極光之夜。' 
           },
          beforeUpdate: function(){
            show('更新之前',this);
           }
       })

看結果：

看到沒，vue範例裡的資料已經變成了南極光之夜。但是此階段頁面DOM節點上顯示的還是初始的資料北極光之夜。

6.updated：

這個階段是轉態更新完成後執行此函數，此時data中資料的狀態值是最新的，而且頁面上顯示的資料也是最新的，DOM節點已經被重新渲染了。

在案例中新增勾點函數：

  var vm = new Vue({
           el: '#app',
           data: {
               information: '北極光之夜。' 
           },
          updated: function(){
            show('更新之後',this);
           }
       })

看執行結果：

更新了，全都更新了~

7.beforeDestroy：

beforeDestroy階段處於vue範例被銷燬之前，當然，這個階段vue範例還能用。

銷燬Vue範例：

vm.$destroy();

在案例中新增勾點函數：

 var vm = new Vue({
           el: '#app',
           data: {
               information: '北極光之夜。' 
           },
          beforeDestroy: function() {
            show('銷燬之前',this);
          }
       })

看效果：

8.destroyed：

這個階段在vue範例銷燬後呼叫，此時所有範例指示的所有東西都會解除繫結，事件監聽器也都移除，子範例也被銷燬。

在案例中新增勾點函數：

var vm = new Vue({
           el: '#app',
           data: {
               information: '北極光之夜。' 
           },
          destroyed: function() {
            show('銷燬之後',this);
          }
       })

看結果：