Vue中的生命周期介紹

更新時間：2022年03月14日 10:28:27 作者：.NET開發(fā)菜鳥

這篇文章介紹了Vue中的生命周期，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

什么是vue的生命周期

Vue中的生命周期是指組件從創(chuàng)建到銷毀的一系列過程。看下面這張官方文檔的圖：

從圖片中可以看出Vue的整個生命周期包括8個狀態(tài)，按照先后順序分別為：

beforeCreate
Created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

Vue組件的生命周期共分為三個階段，如下圖所示：

創(chuàng)建階段和銷毀階段在組件的生命周期中只會執(zhí)行一次，而更新階段會執(zhí)行多次。

先看一下創(chuàng)建階段完成的事情：

在看更新階段完成的事情：

最后在看一下銷毀階段完成的事情：

先看下面的一段代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>生命周期</title>
    <!--引入vue.js-->
    <script src="./js/vue.js" ></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#app',// 2.0不允許掛載到html,body元素上
                data:{
                    msg:'welcome'
                },
                methods:{
                    update(){
                        this.msg="歡迎";
                    },
                    destroy(){
                        this.$destroy();
                    }
                },
                //創(chuàng)建前狀態(tài)  el和data并未初始化
                beforeCreate(){
                    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.msg) 
                    console.log('組件實例剛剛創(chuàng)建，還未進行數據觀測和事件配置');
                },
                created(){//常用  創(chuàng)建完畢狀態(tài)   完成了data數據的初始化  el沒有
                    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.msg); //已被初始化
                    console.log("實例已經創(chuàng)建完成，并且已經進行數據觀測和事件配置")
                },
                beforeMount(){  //掛載前狀態(tài) 完成了el和data初始化
                    this.msg="112233";
                    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.msg); //已被初始化
                    console.log("模板編譯之前，還沒掛載");
                },
                mounted(){//常用  掛載結束狀態(tài)  完成掛載
                    console.group('------mounted 掛載結束狀態(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.msg); //已被初始化 
                    console.log("模板編譯之后，已經掛載，此時才會有渲染頁面，才能看到頁面上數據的顯示")
                },
                beforeUpdate(){   //更新前狀態(tài)
                    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.msg); 
                },
                updated(){   //更新完成狀態(tài)
                    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.msg); 
                },
                beforeDestroy(){   //銷毀前狀態(tài)
                    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.msg); 
                },
                destroyed(){  //銷毀完成狀態(tài)
                    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.msg)
                }
            });
        }
    </script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="msg" />
        <button @click="update">更新數據</button>
        <button @click="destroy">銷毀組件</button> 
    </div>
</body>
</html>

在控制臺的console里面查看運行后的效果：