淺析Vue中生命周期函數(shù)的區(qū)別

更新時間：2023年08月09日 10:52:27 作者：愛敲代碼的小林

生命周期分為四個對子，根據(jù)不同的情況使用不同的函數(shù)，這篇文章主要為大家介紹了這些函數(shù)的使用與區(qū)別，感興趣的小伙伴可以了解一下

生命周期圖

上圖生命周期每個紅色的鉤子是一個階段，可以在每個不同的階段寫合適的代碼。

生命周期函數(shù)

生命周期分為四個對子，根據(jù)不同的情況使用不同的函數(shù)

其中beforeUpdate、updated能執(zhí)行多次

beforeCreate、created	創(chuàng)建前、創(chuàng)建后
beforeMount、mounted	掛載前、掛載后
beforeUpdate、updated	更新前、更新后
beforeDestroy、destroyed	銷毀前、銷毀后

下面的四種應(yīng)用場景用的統(tǒng)一HTML代碼

<div id="app">
    {{myName}}
</div>

beforeCreate和created的區(qū)別

創(chuàng)建前、創(chuàng)建后

beforeCreate創(chuàng)建前應(yīng)用場景

vue代碼：

var app = new Vue({
        el: '#app',
        data() {
            return {
                myName:'abc',
            }
        },
        beforeCreate(){
            //獲取body并輸出測試
            var bodyDom=document.getElementsByTagName("body")[0].innerHTML;
            console.log("created",this.myName,bodyDom);
        }
    });

瀏覽器輸出結(jié)果：

beforeCreate中data的數(shù)據(jù)是沒有被定義的，created后面是undefined并且{{myName}}還未被識別

created創(chuàng)建后應(yīng)用場景

vue代碼：

var app = new Vue({
    el: '#app',
    data() {
        return {
            myName:'abc',
        }
    },
    created(){
        //獲取body并輸出測試
        var bodyDom=document.getElementsByTagName("body")[0].innerHTML;
        console.log("created",this.myName,bodyDom);
    }
});

瀏覽器輸出結(jié)果：

created主要做一些頁面的數(shù)據(jù)的數(shù)據(jù)初始化工作，獲取到了myName的值，但是后臺顯示的還是{{myName}}值還未被填上去

beforeMount和mounted的區(qū)別

掛載前、掛載后

beforeMount掛載前應(yīng)用場景

vue代碼：

var app = new Vue({
    el: '#app',
    data() {
        return {
            myName:'abc',
        }
    },
    beforeMount(){
            //獲取body并輸出測試
            var bodyDom=document.getElementsByTagName("body")[0].innerHTML;
            console.log("beforeMount",this.myName,bodyDom);
        },
    }
});

瀏覽器輸出結(jié)果：

輸出結(jié)果和created創(chuàng)建后一樣，是在創(chuàng)建后掛載前，自我感覺沒啥大用

mounted掛載后應(yīng)用場景

vue代碼：

var app = new Vue({
    el: '#app',
    data() {
        return {
            myName:'abc',
        }
    },
    mounted(){
            //獲取body并輸出測試
            var bodyDom=document.getElementsByTagName("body")[0].innerHTML;
            console.log("beforeMount",this.myName,bodyDom);
        },
    }
});

瀏覽器輸出結(jié)果：

數(shù)據(jù)已經(jīng)渲染到View中

beforeUpdate和updated的區(qū)別

更新前、更新后；和其他三個不同可被重復(fù)執(zhí)行

beforeUpdate更新前應(yīng)用場景

vue代碼：

var app = new Vue({
    el: '#app',
    data() {
        return {
            myName:'abc',
        }
    },
    beforeUpdate(){
            //獲取body并輸出測試
            var bodyDom=document.getElementsByTagName("body")[0].innerHTML;
            console.log("beforeMount",this.myName,bodyDom);
        },
    }
});

瀏覽器輸出結(jié)果：

數(shù)據(jù)更新前，數(shù)據(jù)未改變

updated更新后應(yīng)用場景

vue代碼：

var app = new Vue({
    el: '#app',
    data() {
        return {
            myName:'abc',
        }
    },
    updated(){
            //獲取body并輸出測試
            var bodyDom=document.getElementsByTagName("body")[0].innerHTML;
            console.log("beforeMount",this.myName,bodyDom);
        },
    }
});

瀏覽器輸出結(jié)果：

數(shù)據(jù)更新后，數(shù)據(jù)已改變