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

来源:https://www.cnblogs.com/i3yuan/archive/2019/11/03/11779714.html
-Advertisement-
Play Games

前言 在上一篇中，我們對平時進行vue開發中遇到的常用指令進行歸類說明講解，大概已經學會了怎麼去實現數據綁定，以及實現動態的實現數據展示功能，運用指令，可以更好更快的進行開發。而在這一篇中，我們將通過實例，探究vue的生命周期。 萬物皆有靈，世間萬物都擁有靈魂，小到山河湖海，花草樹木，螞蟻到人類，以 ...


 前言

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

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

          

 

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

 內容

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

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

 執行順序

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

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

 開始

一、創建前/後：

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); //已被初始化
        },
})

 二、載入前/後

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實例，然後掛載，到最後頁面渲染完成）

三、更新前/後

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);
        },
})

四、銷毀前/後

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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Android 菜單 使用XML
    @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().i... ...
  • Android 菜單 Menu
    @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present.// getMenuInflater()... ...
  • Android 表格佈局 TableLayout
    屬性介紹stretchColumns：列被拉伸shrinkColumns：列被收縮collapseColumns：列被隱藏舉例測試 ... ...
  • HTML5中的lang屬性，zh-CN還是zh-Hans？
    一、資源 先提供資源。如果我弄錯了什麼，請以這些文檔為準： W3C文檔、IANA已登記的子標簽、BCP 47、RFC 5646。 二、格式簡介 先上一張圖片： 一個Language Tags，由①到⑦一共四個子標簽組成。有什麼盤算不清楚的，請參考資源部分提供的文檔。 三、各部分含義 ①languag ...
  • Web前端JS實現輪播圖原理
    實現輪播圖有很多方式，但是html的結構都是一樣的。本文使用了Jquery框架，Dom操作更加方便靈活 html部分： CSS代碼： JS代碼： 主要就是JS部分，需要定義一個變數通過li的索引來控製圖片輪播。這裡我使用的是Jquery自帶的動畫淡入淡出效果。當然也可以使用animate函數自定義動 ...
  • CSS背景
    css背景 1. 背景顏色 banckground clor屬性定義元素的背景顏色 ~~~ background color：顏色值； ~~~ 一般情況下元素的背景顏色預設值是transparent（透明的） 2. 背景圖片 background image屬性描述了元素的背景圖像。實際開發常見於L ...
  • NaN不等於NaN
    [TOC] 不知道這個小知識點用得多不多，曾經在書上看到過，所以有一些印象，前段時間順手寫出類似如下的代碼 斷點調試之後發現無論如何都不相等，方法parseInt()返回的結果確實是NaN，但是與右側的NaN比較返回的結果卻是false，這時候才突然想起來NaN有不等於自身的特性，所以簡單收集一下資 ...
  • vue-品牌管理案例-指令和過濾器
    過濾器的基本使用 定義一個過濾器 過濾器可以使用多個· 下麵js代碼的HTML部分 定義一個私有過濾器和私有指令 javascript // 如何自定義一個私有的過濾器（局部） var vm2 = new Vue({ el: ' app2', data: { dt: new Date() }, me ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類