腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

軟件下載

android MAC 驅(qū)動(dòng)下載字體下載 DLL

源碼下載

PHP ASP.NET ASP JSP

軟件編程

C# JAVA C 語(yǔ)言 Delphi Android

網(wǎng)絡(luò)編程

PHP ASP.NET ASP JavaScript

在線工具

CSS格式化 JS格式化 Html轉(zhuǎn)化為Js

數(shù)據(jù)庫(kù)

MYSQL MSSQL oracle DB2 MARIADB

CMS

PHPCMS DEDECMS 帝國(guó)CMS WordPress

常用工具

PHP開(kāi)發(fā)工具 python Photoshop 必備軟件

Vue中的生命周期介紹

更新時(shí)間：2022年03月14日 10:28:27 作者：.NET開(kāi)發(fā)菜鳥(niǎo)

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

什么是vue的生命周期

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

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

beforeCreate
Created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

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

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

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

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

最后在看一下銷(xiāo)毀階段完成的事情：

先看下面的一段代碼：

<!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('組件實(shí)例剛剛創(chuàng)建，還未進(jìn)行數(shù)據(jù)觀測(cè)和事件配置');
                },
                created(){//常用  創(chuàng)建完畢狀態(tài)   完成了data數(shù)據(jù)的初始化  el沒(méi)有
                    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("實(shí)例已經(jīng)創(chuàng)建完成，并且已經(jīng)進(jìn)行數(shù)據(jù)觀測(cè)和事件配置")
                },
                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("模板編譯之前，還沒(méi)掛載");
                },
                mounted(){//常用  掛載結(jié)束狀態(tài)  完成掛載
                    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.msg); //已被初始化 
                    console.log("模板編譯之后，已經(jīng)掛載，此時(shí)才會(huì)有渲染頁(yè)面，才能看到頁(yè)面上數(shù)據(jù)的顯示")
                },
                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(){   //銷(xiāo)毀前狀態(tài)
                    console.group('------beforeDestroy 銷(xiāo)毀前狀態(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(){  //銷(xiāo)毀完成狀態(tài)
                    console.group('------destroyed 組件銷(xiāo)毀完成狀態(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">更新數(shù)據(jù)</button>
        <button @click="destroy">銷(xiāo)毀組件</button> 
    </div>
</body>
</html>

在控制臺(tái)的console里面查看運(yùn)行后的效果：