一、前言

在上一篇中，我們對平時進行vue開發中遇到的常用指令進行歸類說明講解，大概已經學會了怎么去實作資料系結，以及實作動態的實作資料展示功能，運用指令，可以更好更快的進行開發，而在這一篇中，我們將通過實體，探究vue的生命周期，

萬物皆有靈，世間萬物都擁有靈魂，小到山河湖海，花草樹木，螞蟻到人類，以及所有的動植物，大到地球星空和宇宙，都擁有靈魂，可以說他們都是有生命的，只是他們的生命形態是我們人類所不能理解的存在，在生產中，生命周期通俗來講，就是從自然中來回到自然中去的全程序，也就是從采集材料設計，到加工生產后流通使用的程序，以及產品報廢，進而回歸大自然的程序，這整個程序就是一個完整的生命周期，因此，在開發應用專案的中，從啟動頁面的加載，頁面渲染到銷毀，也算是生命周期，Vue把整個生命周期劃分為創建、掛載、更新、銷毀等階段，每個階段都會給一些“鉤子”讓我們來做一些我們想實作的動作，這里的“鉤子”可以這么理解，就是在每一個階段用鉤子鉤住，并進行回應的操作，

學習生命周期，可以使我們更好的理解Vue的生命機制，通過了解每個階段的鉤子，可以更好的實作我們的業務代碼，處理更加復雜的業務邏輯，

二、內容

Vue每一個組件都有屬于自己的生命周期，從開始創建、初始化資料、編譯模板、掛載Dom、渲染→更新→渲染、卸載等這就是一個組件的生命周期，

在整個生命周期內，總共分為8個階段創建前/后，載入前/后，更新前/后，銷毀前/后，

三、執行順序

*圖片來自官網，只要你理解了這張圖，也就對Vue的生命周期有了一個大致的了解，

在談到Vue的生命周期的時候，我們首先需要創建一個實體：

四、開始

1、創建前/后：

1.beforeCreate-創建前：實體創建前：這個階段實體的data、methods是讀不到的（el 和 data 并未初始化）

  var app = new Vue({
      el: '#app',
      data: {
          message : "這是艾三元的主頁" 
      },
       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)  //undefined
        },
})

2.created-創建完成：實體創建后：這個階段已經完成了資料觀測(data observer)，屬性和方法的運算， watch/event 事件回呼，mount掛載階段還沒開始，$el 屬性目前不可見，資料并沒有在DOM元素上進行渲染（完成了data資料的初始化，el沒有）

 var app = new Vue({
      el: '#app',
      data: {
          message : "這是艾三元的主頁" 
      },
        created: function () {
            console.group('created 組件創建完畢,屬性已經系結但dom還未生成的狀態===============》');
            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); //已被初始化
        },
})

2、載入前/后

1.beforeMount ：準備載入——在掛載開始之前被呼叫：相關的 render 函式首次被呼叫，程式運行，控制臺看輸出（完成了虛擬el和data初始化）

  var app = new Vue({
      el: '#app',
      data: {
          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); //已被初始化  
        },
})

2.mounted ：掛載完成——el選項的DOM節點被新創建的 vm.$el 替換，并掛載到實體上去之后呼叫此生命周期函式，此時實體的資料在DOM節點上進行渲染（完成了真實el和data初始化）

var app = new Vue({
      el: '#app',
      data: {
          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); //已被初始化 
        },
})

這個時候，頁面渲染的四個階段已經完成了，我們看看流程：（剛開始的時候beforeCreate階段，資料和頁面都沒有渲染，但是頁面的靜態資料已經被加載出來，然后一步一步，先vue實體，然后掛載，到最后頁面渲染完成）

3、更新前/后

1.beforeUpdate ：更新Data之前——資料更新時呼叫，但不進行DOM重新渲染，在資料更新時DOM沒渲染前可以在這個生命函式里進行狀態處理

當修改vue實體的data時，vue就會自動幫我們更新渲染視圖，在這個程序中，vue提供了beforeUpdate的鉤子給我們，在檢測到我們要修改資料的時候，更新渲染視圖之前就會觸發鉤子beforeUpdate，

  var app = new Vue({
      el: '#app',
      data: {
          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); 
        },
})

控制臺輸入 app.message = '艾三元'

由圖看來，我們的 Data 資料已經更新了，但是頁面里還沒有更新

2.update ：這個狀態下資料更新并且DOM重新渲染，當這個生命周期函式被呼叫時，組件 DOM 已經更新，所以你現在可以執行依賴于 DOM 的操作，當實體每次進行資料更新時updated都會執行

 var app = new Vue({
      el: '#app',
      data: {
          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);
        },
})

4、銷毀前/后

1.beforeDestroy ：頁面銷毀前——實體銷毀之前呼叫，呼叫實體的destroy( )方法可以銷毀當前的組件，在銷毀前，會觸發beforeDestroy鉤子，

  var app = new Vue({
      el: '#app',
      data: {
          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); 
        },
})

控制臺輸入 app.$destroy()

2.destroyed ：銷毀完成——Vue 實體銷毀后呼叫，呼叫后，Vue 實體指示的所有東西都會解系結，所有的事件監聽器會被移除，所有的子實體也會被銷毀，

var app = new Vue({
      el: '#app',
      data: {
          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)
        }
})

這個時候我們可以看到，vue 實體被銷毀后，再修改 Data 頁面也已經不能修改頁面 DOM 了，

五、原始碼

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src=https://www.cnblogs.com/i3yuan/p/"https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>

<div id="app">
     <p>{{ message }}</p>
</div>

<script type="text/javascript">
    
  var app = new Vue({
      el: '#app',
      data: {
          message : "這是艾三元的主頁" 
      },
        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)  //undefined
        },
        created: function () {
           console.group('created 組件創建完畢,屬性已經系結但dom還未生成的狀態===============》');
           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>
</body>
</html>

View Code

附加說明

1.說說鉤子是什么時候觸發的？

Vue檔案原始碼：在實體化的時候

function Vue(opt){    

    this._init(opt)

}
Vue.prototype._init(opt){
    ... 合并選項
    ... 設定初始值 ，事件 等資料
    initLifecycle(vm)
    callHook(vm, 'beforeCreate');
    ... 初始化選項等資料
    callHook(vm, 'created');
    ...獲取掛載的DOM 父節點
    callHook(vm, 'beforeMount');
    ...決議模板成渲染函式，并執行渲染函式，生成DOM插入頁面
    vm._isMounted = true;
    callHook(vm, 'mounted');
}
// 組件更新時會呼叫這個函式
Vue.prototype._update = function(

    vnode, hydrating

) {    

    if (vm._isMounted) {

        callHook(vm, 'beforeUpdate');
    }
    ...重新呼叫渲染函式，對比舊節點和新節點，得到最小差異，然后只更新這部分頁面
    callHook(vm, 'updated');
}
// 節點被移除時會呼叫這個函式
Vue.prototype.$destroy = function() {
    callHook(vm, 'beforeDestroy');
    vm._isBeingDestroyed = true;
    ...實體被消除，移除所有 watcher
    vm._isDestroyed = true;
    ...DOM被移除
    callHook(vm, 'destroyed');
}

在執行鉤子的時候，會觸發這個函式，遍歷執行，系結背景關系

function callHook(vm, hook) {    

    // 是自己傳入的 created 等回呼

    var handlers = vm.$options[hook];    

    if (handlers) {        

    for (var i = 0,j = handlers.length; i < j; i++) {

            handlers[i].call(vm);
        }
    }
}

六、總結

1.通過簡單了解 Vue 生命周期的八個階段，可以應用在之后的開發中，針對不同的階段的鉤子采取不同的操作，更好的實作我們的業務代碼，處理更加復雜的業務邏輯，

2.參考資料Vue官網

3.下一篇開始創建專案應用

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/177010.html

標籤：JavaScript

上一篇：記一次大廠的面試程序

下一篇：vue-品牌管理案例-指令和過濾器

Vue學習系列(四)——理解生命周期和鉤子