【Vue】----- 淺談vue的生命周期

一、概念

　　vue生命周期，又叫生命周期鈎子函數，是組件從創建到銷毀的過程。

二、主要的八大生命周期

　　1.首先，為方便觀察每個周期的特點，我們模擬一個"one"組件的創建與銷毀，並在八個生命周期中分別打印掛載點、屬性、方法以及真實的DOM結構，通過輸出結果進行分析。

<div id="myApp">
    <input type="button" value="創建與銷毀" @click="isShow= !isShow">
    <one v-if="isShow"></one>
</div>

<script>
    new Vue({
        el:"#myApp",
        data:{
            isShow:true
        },
        components: {
            one:{
                template:`
                    <div>
                        <input type="text" v-model="userName">
                        <p ref="my">{{num}}</p>
                    </div>
                `,
                data(){
                    return {
                        userName:"生命周期",
                        num:0,
                    }
                },
                methods:{
                    fn(){
                        console.log(this.userName);
                    }
                },
                beforeCreate(){
                    console.group("創建之前beforeCreate**************************");
                    console.log(this.$el); //掛載點
                    console.log(this.userName); //屬性
                    console.log(this.fn); //方法
                    console.log(this.$refs.my); //通過this.$refs可以訪問真實的DOM結構
                    console.groupEnd();
                },
                created(){
                    console.group("創建之后created*******************************");
                    console.log(this.$el);
                    console.log(this.userName);
                    console.log(this.fn);
                    console.log(this.$refs.my);
                    console.groupEnd();
                },
                beforeMount(){
                    console.group("掛載之前beforeMount********************************");
                    console.log(this.$el);
                    console.log(this.userName);
                    console.log(this.fn);
                    console.log(this.$refs.my);
                    console.groupEnd();
                },
                mounted(){
                    console.group("掛載之后mounted********************************");
                    console.log(this.$el);
                    console.log(this.userName);
                    console.log(this.fn);
                    console.log(this.$refs.my);
                    console.groupEnd();
                },
                beforeUpdate(){
                    console.group("更新視圖數據之前beforeUpdate********************************");
                    console.log(this.$el);
                    console.log(this.userName);
                    console.log(this.fn);
                    console.log(this.$refs.my.innerText);
                    console.groupEnd();
                },
                updated(){
                    console.group("更新視圖數據之后updated********************************");
                    console.log(this.$el);
                    console.log(this.userName);
                    console.log(this.fn);
                    console.log(this.$refs.my.innerText);
                    console.groupEnd();
                },
                beforeDestroy(){
                    clearInterval(this.timer);
                    console.group("vue實例銷毀之前beforeDestroy********************************");
                    console.log(this.$el);
                    console.log(this.userName);
                    console.log(this.fn);
                    console.log(this.$refs.my.innerText);
                    console.groupEnd();
                },
                destroyed(){
                    console.group("vue實例銷毀之后destroyed********************************");
                    console.log(this.$el);
                    console.log(this.userName);
                    console.log(this.fn);
                    console.log(this.$refs.my);
                    console.groupEnd();
                }

            }
        }
    })
</script>

　　2.八大生命周期的特點

• beforeCreate() 創建前：當前生命周期函數主要用於初始化工作，此時可以創建一個loading；

　　

• created() 創建后：可以訪問到vm身上所有屬性和方法；會將data和methods身上所有的屬性和方法都掛載在vm的實例身上；會在data身上所有屬性添加getter/setter方法，因此若要進行前后端數據交互時必須在當前生命周期中進行"響應式原理";若數據未提前在data中進行綁定，那么這個屬性身上不會有getter/setter方法，數據便不會動態改變；

　　

• beforeMount() 掛載前：數據和模板還未進行結合，訪問不到真實的DOM結構，可以對數據做最后的的修改；

　　

• mounted() 掛載后：數據和模板已經結合，可以通過this.$refs訪問到真實的DOM結構；

　　

• beforeUpdate() 更新前：當data中的數據發生改變時會執行，可以訪問到真實DOM結構、對數據做最后的修改，當前生命周期函數中的數據和模板還沒更新完成；

　　

• updated() 更新后：數據更新后形成最新的DOM結構，當前是一個頻繁觸發的函數，因此要做一些時間綁定或實例化時，需要做一個提前判斷；

　　

• beforeDestroy() 銷毀前：可以繼續訪問到真實DOM結構以及data中的數據，通常在這個生命周期函數中做一些事件綁定/移除的操作；

　　

• destroyted() 銷毀后：斷開DOM與數據之間的關聯，訪問不到真實的DOM結構；

　　

 

 　　3.注意：

• 多次執行的生命周期函數：beforeUpdate()、updated()
• 組件第一次創建時會執行：beforeCreate()、created()、beforeMount()、mounted()