詳解vue生命周期

更新時間：2021年11月16日 09:59:55 作者：RxinY924

這篇文章主要為大家介紹了vue的生命周期，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

為什么要理解生命周期

用Vue框架，熟悉它的生命周期可以讓開發(fā)更好的進行。

如果只是單純地知道vue里面的簡單語法，你是可以實現(xiàn)對應的一些項目和對應的想法，但是如果一旦發(fā)生問題，我們就需要借助生命周期去尋找問題，甚至說有一些需求的話，你也通過生命周期的情況來定我們該把這個東西寫在哪里。所以理解vue的生命周期還是很有必要的

什么是生命周期

Vue實例從創(chuàng)建到銷毀的過程，就是生命周期。詳細來說也就是從開始創(chuàng)建、初始化數據、編譯模板、掛載Dom、渲染→更新→渲染、卸載等一系列過程。

另外補充一點，Vue的實例,它是Vue框架的入口，可以理解為前端的ViewModel，它包含了頁面中的業(yè)務邏輯處理、數據模型等，它也有自己的一系列的生命周期的函數鉤子，輔助我們進行對整個Vue實例生成、編譯、掛著、銷毀等過程進行js控制。
官網給出的生命周期圖（翻譯成中文）如下：

在這里插入圖片描述

生命周期鉤子函數

生命周期鉤子，就是生命周期事件的別名而已，生命周期鉤子 = 生命周期函數 = 生命周期事件

主要的生命周期函數分類：

創(chuàng)建期間的生命周期函數：
beforeCreate：實例剛在內存中被創(chuàng)建出來，此時，還沒有初始化好 data 和 methods 屬性
created：實例已經在內存中創(chuàng)建OK，此時 data 和 methods 已經創(chuàng)建OK，此時還沒有開始編譯模板
beforeMount：此時已經完成了模板的編譯，但是還沒有掛載到頁面中
mounted：此時，已經將編譯好的模板，掛載到了頁面指定的容器中顯示

運行期間的生命周期函數：
beforeUpdate：狀態(tài)更新之前執(zhí)行此函數，此時 data 中的狀態(tài)值是最新的，但是界面上顯示的數據還是舊的，因為此時還沒有開始重新渲染DOM節(jié)點
updated：實例更新完畢之后調用此函數，此時 data 中的狀態(tài)值和界面上顯示的數據，都已經完成了更新，界面已經被重新渲染好了！

銷毀期間的生命周期函數：
beforeDestroy：實例銷毀之前調用。在這一步，實例仍然完全可用。
destroyed：Vue 實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解除綁定，所有的事件監(jiān)聽器會被移除，所有的子實例也會被銷毀。

created和mounted

在生命周期鉤子函數中，最常用的應該就是created和mounted了。

created:在模板渲染成html前調用，即通常初始化某些屬性值，然后再渲染成視圖。主要應用：調用數據，調用方法，調用異步函數
mounted:在模板渲染成html后調用，通常是初始化頁面完成后，再對html的dom節(jié)點進行一些需要的操作。

在created的時候，視圖中的html并沒有渲染出來，所以此時如果直接去操作html的dom節(jié)點，一定找不到相關的元素
而在mounted中，由于此時html已經渲染出來了，所以可以直接操作dom節(jié)點，

其實兩者比較好理解，通常created使用的次數多，而mounted通常是在一些插件的使用或者組件的使用中進行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID); 通常會有這一步，而如果你寫入組件中，你會發(fā)現(xiàn)在created中無法對chart進行一些初始化配置，一定要等這個html渲染完后才可以進行，那么mounted就是不二之選。

鉤子的一些實戰(zhàn)用法

1.異步函數

這里我們用定時器來做異步函數

<div id="app">
    <ul>
        <li v-for="(item,index) of list" key="index">{{item}}</li>
    </ul>
</div>

<script type="text/javascript">
    var app = new Vue({
        el:'#app',
        data:{
            list:['aaaaaaaa','bbbbbbb','ccccccc']
        },
        created:function(){
            consoloe.log('created異步：aaaaa');
            //異步獲取數據
            // 因為是異步,就和我們ajax獲取數據一樣
            setTimeout(()=>{
                this.list=['111','222','333','444'],
                console.log('created異步：',document.getElementsByTagName('li').length);
            },0)
        },
        mounted: function () {
            console.log('mounted:',document.getElementsByTagName('li').length);
        },
        updated: function () {
            console.log('updated:',document.getElementsByTagName('li').length)
        },
    })
</script>

結果為：

create: aaaaaaaa
mounted: 3
created異步函數： 3
updated: 4

解釋：

可以看到因為是在created的鉤子中加入異步函數，所以函數的執(zhí)行順序為：

ceated鉤子,mounted鉤子,異步函數,updated鉤子(根據事件隊列原理,只有在updated后，li才是真的DOM渲染為4個，所以異步函數中獲取的li的個數時是沒有變化的li的個數)。

因為mounted獲取到的是我們在Vue的data中設置初始值渲染的DOM，而我們是在異步函數中變化的list數據，所以mounted獲取的li的個數為3。

update函數是只要數據vue綁定的數據變化就會觸發(fā)，所以最后執(zhí)行，為4

這是不是意味著可以直接在update函數中操作呢，其實不是，因為update函數是針對vue的所有數據的變化，而我們也有可能會有其他數據的變化。

例如下面的例子：

//我們利用異步函數改變了兩次list，會發(fā)現(xiàn)update被觸發(fā)了2次
created:function(){
        //異步獲取數據
        // 因為是異步,就和我們ajax獲取數據一樣
        setTimeout(()=>{
             this.list=['111','222','333','444'],
             console.log('created異步：',document.getElementsByTagName('li').length);
        },0)
        setTimeout(()=>{
             this.list=['快樂大本營','腳踏實地','300033','天天向上','好好學習'],
             console.log('created異步：',document.getElementsByTagName('li').length);
        },1000)
},
mounted: function () {
        console.log('mounted:',document.getElementsByTagName('li').length);
},
updated: function () {
        console.log('updated:',document.getElementsByTagName('li').length)
},

結果為：

在這里插入圖片描述

2.Vue.nextTick對異步函數的結果進行操作

我們想要改變數據時,各自觸發(fā)各自的方法

created:function(){
//異步獲取數據
// 因為是異步,就和我們ajax獲取數據一樣

    //為了在數據變化之后等待 Vue 完成更新 DOM ，可以在數據變化之后立即使用 Vue.nextTick(callback) 。這樣回調函數在 DOM 更新完成后就會調用。
    setTimeout(()=>{
        this.list=['111','222','333','444'],
        console.log('created異步：',document.getElementsByTagName('li').length);
        this.$nextTick(function(){
            console.log("created$nextTick：",document.getElementsByTagName('li').length)
        });
    },0)
    setTimeout(()=>{
        this.list=['快樂大本營','腳踏實地','300033','天天向上','好好學習'],
        console.log('created異步：',document.getElementsByTagName('li').length);
        this.$nextTick(function(){
            console.log("created$nextTick：",document.getElementsByTagName('li').length)
        });
    },1000)
},
mounted: function () {
    console.log('mounted:',document.getElementsByTagName('li').length);
},
updated: function () {
  console.log('updated:',document.getElementsByTagName('li').length)
},

結果為：

我們可以看到通過$nextTick我們可以對異步函數的結果進行各自的操作

在這里插入圖片描述