Vue生命周期介紹和鉤子函數(shù)詳解

更新時(shí)間：2021年10月24日 17:10:55 作者：秋田君

這篇文章主要給大家介紹了關(guān)于Vue生命周期介紹和鉤子函數(shù)的相關(guān)資料，對(duì)大家學(xué)習(xí)或者使用vue2具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨小編一起來(lái)看看吧

Vue生命周期介紹和鉤子函數(shù)

組件每個(gè)階段它的內(nèi)部構(gòu)造是不一樣的，所以一般特定的鉤子做特定的事，比如Ajax獲取數(shù)據(jù)就可以在mounted階段。從Vue實(shí)例被創(chuàng)建開(kāi)始到該實(shí)例最終被銷毀的整個(gè)過(guò)程叫做VUE的生命周期，在這個(gè)生命周期內(nèi)發(fā)生了下面的事情：從vue實(shí)例被創(chuàng)建開(kāi)始，首先vue實(shí)例被創(chuàng)建，之后開(kāi)始數(shù)據(jù)的初始化，編譯模板，掛載dom，渲染dom,更新對(duì)象屬性，渲染dom，解綁銷毀。

VUE生命周期鉤子

生命周期鉤子又被叫做生命周期時(shí)間，生命周期函數(shù)，生命周期鉤子就是vue生命周期中出發(fā)的各類事件，這些事件被稱為生命周期鉤子，在vue生命周期中，大部分分為四個(gè)階段，創(chuàng)建，掛在，更新，銷毀，這四個(gè)階段各自對(duì)應(yīng)兩個(gè)生命周期鉤子

一、創(chuàng)建部分(create)，就是vue實(shí)例被初始化，簡(jiǎn)單的說(shuō)就是我們?cè)诖a中進(jìn)行了這個(gè)操作 var app = new Vue() ,之后就進(jìn)入的vue生命周期的創(chuàng)建階段。在創(chuàng)建階段中會(huì)有兩個(gè)提供給我們可編程的接口，分別是beforeCreate 和 created。這兩個(gè)接口都是在創(chuàng)建階段觸發(fā)，但是兩個(gè)接口又有所不同，beforeCreate比created要先觸發(fā)，即vue實(shí)例初始化后，沒(méi)有進(jìn)行數(shù)據(jù)讀取前就觸發(fā)，如果在此時(shí)進(jìn)行讀取data中的數(shù)據(jù)就會(huì)提示unfined。 created 是在實(shí)例創(chuàng)建完成后再被調(diào)用，此時(shí)data中的數(shù)據(jù)已經(jīng)寫入完成，但是還沒(méi)有進(jìn)行dom的掛載，也就還沒(méi)有與頁(yè)面進(jìn)行關(guān)聯(lián)，下面進(jìn)入掛載階段。

二、掛載階段(mount)，該階段就是將頁(yè)面中dom掛載到實(shí)例化后的vue對(duì)象上。簡(jiǎn)單的說(shuō)就是執(zhí)行了 el: ‘#dom'。該階段同樣有兩個(gè)接口供我們進(jìn)行編程，分別是 beforemount 和 mounted 。這兩個(gè)接口的主要區(qū)別在與以有沒(méi)有將dom掛載到實(shí)例對(duì)象上，beforemount 是在掛載之前觸發(fā)，僅對(duì)模板進(jìn)行解析，如果此時(shí)輸出需要掛載的dom的innerHTML的話，會(huì)將模板原樣輸出，并沒(méi)有將數(shù)據(jù)進(jìn)行渲染。 mounted 實(shí)在dom掛載之后，可以將data中的數(shù)據(jù)渲染的頁(yè)面上。該階段之后就進(jìn)入更新階段。

三、更新階段(update)，該階段是在頁(yè)面上的數(shù)據(jù)在第一次加載之后再次進(jìn)行更新的時(shí)候。同樣對(duì)應(yīng)兩個(gè)接口 beforeupdate 和 update。這兩個(gè)接口的差異主要在于有沒(méi)有對(duì)頁(yè)面dom進(jìn)行渲染。在我們對(duì)data中的數(shù)據(jù)進(jìn)行修改，且修改完成后觸發(fā) beforeupdate ，此時(shí)data中的屬性值已經(jīng)是修改完成的狀態(tài)，但是沒(méi)有對(duì)頁(yè)面的dom進(jìn)行渲染。update 就是將數(shù)據(jù)渲染到頁(yè)面上。至此vue的生命周期已經(jīng)進(jìn)行到更新階段，在正常的使用中我們會(huì)多次的經(jīng)常處于更新階段，對(duì)頁(yè)面的數(shù)據(jù)進(jìn)行各種修改。但是為了滿足將不必要的事件關(guān)閉，釋放內(nèi)存，就還需要銷毀階段。
四、銷毀階段(destory)，在一個(gè)實(shí)列被銷毀后，該實(shí)例所綁定的所有事件都會(huì)失效，監(jiān)聽(tīng)器也會(huì)被移出。該階段對(duì)應(yīng)兩個(gè)接口 beforeDestroy 和 destroy。deforeDestory是在實(shí)例需要被銷毀但是還沒(méi)有先回之前調(diào)用，此時(shí)該實(shí)例的的綁定的各類事件、監(jiān)聽(tīng)器仍然可用。 destroy是在實(shí)例銷毀后調(diào)用，此時(shí)該實(shí)例的所有東西都不能使用，但是頁(yè)面上的數(shù)據(jù)仍保持頁(yè)面最后一次渲染的數(shù)據(jù)。

Vue生命周期簡(jiǎn)介

在這里插入圖片描述

上面描述的幾個(gè)階段

使用代碼觀察鉤子函數(shù)

<!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 : "xuxiao is boy" 
      },
       beforeCreate: function () {
                console.group('beforeCreate 創(chuàng)建前狀態(tài)===============》');
               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)  
        },
        created: function () {
            console.group('created 創(chuàng)建完畢狀態(tài)===============》');
            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 掛載前狀態(tài)===============》');
            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 掛載結(jié)束狀態(tài)===============》');
            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 更新前狀態(tài)===============》');
            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 更新完成狀態(tài)===============》');
            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 銷毀前狀態(tài)===============》');
            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 銷毀完成狀態(tài)===============》');
            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>

create 和 mounted 相關(guān)

beforecreated：el 和 data 并未初始化

created:完成了 data 數(shù)據(jù)的初始化，el沒(méi)有

beforeMount：完成了 el 和 data 初始化

mounted ：完成掛載

另外在標(biāo)紅處，我們能發(fā)現(xiàn)el還是 {{message}}，這里就是應(yīng)用的 Virtual DOM（虛擬Dom）技術(shù)，先把坑占住了。到后面mounted掛載的時(shí)候再把值渲染進(jìn)去。

在這里插入圖片描述

update 相關(guān)

在這里插入圖片描述

destroy 相關(guān)

有關(guān)于銷毀，暫時(shí)還不是很清楚。我們?cè)赾onsole里執(zhí)行下命令對(duì) vue實(shí)例進(jìn)行銷毀。銷毀完成后，我們?cè)僦匦赂淖僲essage的值，vue不再對(duì)此動(dòng)作進(jìn)行響應(yīng)了。但是原先生成的dom元素還存在，可以這么理解，執(zhí)行了destroy操作，后續(xù)就不再受vue控制了。

在這里插入圖片描述