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

時間  2019-11-10
標籤 vue 學習 系列 理解 生命週期 鉤子 简体版
原文   原文鏈接

 前言

    在上一篇中，咱們對平時進行vue開發中遇到的經常使用指令進行歸類說明講解，大概已經學會了怎麼去實現數據綁定，以及實現動態的實現數據展現功能，運用指令，能夠更好更快的進行開發。而在這一篇中，咱們將經過實例，探究vue的生命週期。javascript

    萬物皆有靈，世間萬物都擁有靈魂，小到山河湖海，花草樹木，螞蟻到人類，以及全部的動植物，大到地球星空和宇宙，都擁有靈魂，能夠說他們都是有生命的，只是他們的生命形態是咱們人類所不能理解的存在。在生產中，生命週期通俗來說，就是從天然中來回到天然中去的全過程，也就是從採集材料設計，到加工生產後流通使用的過程，以及產品報廢，進而回歸大天然的過程，這整個過程就是一個完整的生命週期。所以，在開發應用項目的中，從啓動頁面的加載，頁面渲染到銷燬，也算是生命週期。Vue把整個生命週期劃分爲建立、掛載、更新、銷燬等階段，每一個階段都會給一些「鉤子」讓咱們來作一些咱們想實現的動做。這裏的「鉤子」能夠這麼理解，就是在每個階段用鉤子鉤住，並進行響應的操做。 html

          

 

     學習生命週期，可使咱們更好的理解Vue的生命機制，經過了解每一個階段的鉤子，能夠更好的實現咱們的業務代碼，處理更加複雜的業務邏輯。vue

 內容

    Vue每個組件都有屬於本身的生命週期，從開始建立、初始化數據、編譯模板、掛載Dom、渲染→更新→渲染、卸載等這就是一個組件的生命週期。java

    在整個生命週期內，總共分爲8個階段建立前/後，載入前/後，更新前/後，銷燬前/後。node

 執行順序

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

    在談到Vue的生命週期的時候，咱們首先須要建立一個實例：dom

 開始

1、建立前/後：

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

  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://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.下一篇開始建立項目應用

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程