快捷導(dǎo)航

一文搞懂Vue八大生命周期鉤子函數(shù)

更新時(shí)間：2023年05月05日 11:15:47 作者：北極光之夜。

這篇文章主要介紹了Vue八大生命周期鉤子函數(shù),生命周期函數(shù)，就是在某個(gè)時(shí)刻會(huì)自動(dòng)執(zhí)行的函數(shù),本文帶你了解八大生命周期鉤子函數(shù),一起來(lái)看看吧

一.速識(shí)概念：

我們把一個(gè)對(duì)象從生成（new）到被銷(xiāo)毀（destory）的過(guò)程，稱(chēng)為生命周期。而生命周期函數(shù)，就是在某個(gè)時(shí)刻會(huì)自動(dòng)執(zhí)行的函數(shù)。
按照官方的原話，就是每個(gè) Vue 實(shí)例在被創(chuàng)建時(shí)都要經(jīng)過(guò)一系列的初始化過(guò)程——例如，需要設(shè)置數(shù)據(jù)監(jiān)聽(tīng)、編譯模板、將實(shí)例掛載到 DOM 并在數(shù)據(jù)變化時(shí)更新 DOM 等。同時(shí)在這個(gè)過(guò)程中也會(huì)運(yùn)行一些叫做生命周期鉤子的函數(shù)，這給了用戶(hù)在不同階段添加自己的代碼的機(jī)會(huì)。
簡(jiǎn)單來(lái)說(shuō)就是每個(gè)Vue實(shí)例在被創(chuàng)建時(shí)都要經(jīng)過(guò)一系列的初始化過(guò)程：創(chuàng)建實(shí)例，裝載模板，渲染模板等。Vue為生命周期中的每個(gè)狀態(tài)都設(shè)置了鉤子函數(shù)(監(jiān)聽(tīng)函數(shù)) 。每當(dāng)Vue實(shí)例處于不同的生命周期時(shí)，對(duì)應(yīng)的函數(shù)就會(huì)被觸發(fā)調(diào)用。

二.八大生命周期鉤子函數(shù)：

函數(shù)	調(diào)用時(shí)間
beforeCreate	vue實(shí)例初始化之前調(diào)用
created	vue實(shí)例初始化之后調(diào)用
beforeMount	掛載到DOM樹(shù)之前調(diào)用
mounted	掛載到DOM樹(shù)之后調(diào)用
beforeUpdate	數(shù)據(jù)更新之前調(diào)用
updated	數(shù)據(jù)更新之后調(diào)用
beforeDestroy	vue實(shí)例銷(xiāo)毀之前調(diào)用
destroyed	vue實(shí)例銷(xiāo)毀之后調(diào)用

下面是官方文檔里的生命周期圖，英語(yǔ)好的同學(xué)可以看看：

在這里插入圖片描述

三.結(jié)合代碼了解：

先看案例基本代碼如下，后面通過(guò)如下代碼步驟演示一個(gè)對(duì)象從生成到被銷(xiāo)毀的過(guò)程各階段執(zhí)行的生命周期函數(shù)。注意show函數(shù)的作用。

<!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">
       //創(chuàng)建vue實(shí)例
       var vm = new Vue({
           el: '#app',
           data: {
               information: '北極光之夜。' 
           }
       })
       // 各個(gè)生命周期函數(shù)通過(guò)調(diào)用下面這個(gè)函數(shù)了解其所處的生命階段
       function show(inf,obj){
          console.log(inf);
          console.log("------------------------------------------");
          console.log('獲取vue實(shí)例data里的數(shù)據(jù):');
          console.log(obj.information);
          console.log("------------------------------------------");
          console.log('掛載的對(duì)象，就是DOM：');
          console.log(obj.$el);
          console.log("------------------------------------------");
          console.log('頁(yè)面上已經(jīng)掛載的DOM：');
          console.log(document.getElementById('app').innerHTML);
       }

    </script>

1. beforeCreate：

這個(gè)階段vue實(shí)例剛剛在內(nèi)存中創(chuàng)建，此時(shí)data和methods這些都沒(méi)初始化好。
在案例中添加beforeCreate鉤子函數(shù)：

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

看運(yùn)行結(jié)果：

在這里插入圖片描述

可以看到，此時(shí)vue實(shí)例剛剛在內(nèi)存中創(chuàng)建，其它什么都undefined。

2.created：

這個(gè)階段vue實(shí)例在內(nèi)存中已經(jīng)創(chuàng)建好了，data和methods也能夠獲取到了，但是模板還沒(méi)編譯。
在案例中添加created鉤子函數(shù)：

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

看結(jié)果：

在這里插入圖片描述

看到?jīng)]，已經(jīng)知道data里的數(shù)據(jù)了。其它的話都沒(méi)。

3.beforeMount：

這個(gè)階段完成了模板的編譯，但是還沒(méi)掛載到頁(yè)面上。
在案例中添加鉤子函數(shù)：

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

看結(jié)果：

在這里插入圖片描述

看到?jīng)]，要掛載的對(duì)象都編譯好了，但是頁(yè)面的DOM樹(shù)還沒(méi)掛上去，這個(gè)階段頁(yè)面還沒(méi)能顯示出來(lái)。

4.mounted：

這個(gè)階段，模板編譯好了，也掛載到頁(yè)面中了，頁(yè)面也可以顯示了。
在案例中添加鉤子函數(shù)：

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

看結(jié)果：

在這里插入圖片描述

5.beforeUpdate:

轉(zhuǎn)態(tài)更新之前執(zhí)行此函數(shù)，此時(shí)data中數(shù)據(jù)的狀態(tài)值已經(jīng)更新為最新的，但是頁(yè)面上顯示的數(shù)據(jù)還是最原始的，還沒(méi)有重新開(kāi)始渲染DOM樹(shù)。

先改變data里數(shù)據(jù)：

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

在案例中添加鉤子函數(shù)：

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

看結(jié)果：

在這里插入圖片描述

看到?jīng)]，vue實(shí)例里的數(shù)據(jù)已經(jīng)變成了南極光之夜。但是此階段頁(yè)面DOM節(jié)點(diǎn)上顯示的還是初始的數(shù)據(jù)北極光之夜。

6.updated：

這個(gè)階段是轉(zhuǎn)態(tài)更新完成后執(zhí)行此函數(shù)，此時(shí)data中數(shù)據(jù)的狀態(tài)值是最新的，而且頁(yè)面上顯示的數(shù)據(jù)也是最新的，DOM節(jié)點(diǎn)已經(jīng)被重新渲染了。

在案例中添加鉤子函數(shù)：

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

看運(yùn)行結(jié)果：

在這里插入圖片描述

更新了，全都更新了~

7.beforeDestroy：

beforeDestroy階段處于vue實(shí)例被銷(xiāo)毀之前，當(dāng)然，這個(gè)階段vue實(shí)例還能用。

銷(xiāo)毀Vue實(shí)例：

vm.$destroy();

在案例中添加鉤子函數(shù)：

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

看效果：

在這里插入圖片描述

8.destroyed：

這個(gè)階段在vue實(shí)例銷(xiāo)毀后調(diào)用，此時(shí)所有實(shí)例指示的所有東西都會(huì)解除綁定，事件監(jiān)聽(tīng)器也都移除，子實(shí)例也被銷(xiāo)毀。

在案例中添加鉤子函數(shù)：

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

看結(jié)果：

在這里插入圖片描述