一、vue實例的生命周期

vue實例的生命周期指的是：從Vue實例創(chuàng)建，運行，到銷毀期間，會伴隨著各種各樣的事件，這些事件統(tǒng)稱為生命周期。

生命周期事件，也稱生命周期函數(shù)，也稱生命周期鉤子。

二、生命周期函數(shù)三個階段

1、實例化期和加載期

創(chuàng)建期間的生命周期函數(shù)：beforeCreate 和 created，beforeMount 和 mounted。

一、vue實例的生命周期

vue實例的生命周期指的是：從Vue實例創(chuàng)建，運行，到銷毀期間，會伴隨著各種各樣的事件，這些事件統(tǒng)稱為生命周期。

生命周期事件，也稱生命周期函數(shù)，也稱生命周期鉤子。

二、生命周期函數(shù)三個階段

1、實例化期和加載期

創(chuàng)建期間的生命周期函數(shù)：beforeCreate 和 created，beforeMount 和 mounted。

6.png

2、更新期

運行期間的生命周期函數(shù)：beforeUpdate 和 updated

7.png

3、卸載期

銷毀期間的生命周期函數(shù)：beforeDestroy 和 destroyed

[圖片上傳失敗...(image-615cc4-1630840626148)]

三、生命周期函數(shù)詳解

創(chuàng)建期間：

• beforeCreate：表示實例完全被創(chuàng)建出來之前，會執(zhí)行beforeCreate函數(shù)，這時data 和 methods 中的 數(shù)據(jù)都還沒有沒初始化，如果調用data和methods的數(shù)據(jù)的話，會報錯。
• created：實例已經(jīng)在內存中創(chuàng)建OK，此時 data 和 methods 已經(jīng)創(chuàng)建OK，此時還沒有開始 編譯模板。
• beforeMount：此時已經(jīng)完成了模板的編譯，但是還沒有從內存掛載到頁面中。

注意：在 beforeMount 執(zhí)行的時候，頁面中的元素，還沒有被真正替換過來，只是之前寫的一些模板（比如插值表達式）還只是字符串的形式。

• mounted： 此時，已經(jīng)將編譯好的模板，掛載到了頁面指定的容器中顯示。

運行期間：

• beforeUpdate：data數(shù)據(jù)更新之后，但是還未渲染到頁面時執(zhí)行的函數(shù)。這時data數(shù)據(jù)已經(jīng)更新，但是頁面的數(shù)據(jù)還是舊的。
• updated：updated 事件執(zhí)行的時候，頁面和 data 數(shù)據(jù)已經(jīng)保持同步了，都是最新的。

銷毀期間：

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

示例代碼：

export let User = {
    data(){
        return {
            username: "zhuiszhu",
            count : 0
        }
    },
    template : `
        <div>
            <h3 id="test">{{username}}</h3>
            <p>用戶中心頁頁面內容</p>
            <p>{{count}}</p>
            <button @click="add">+</button>
        </div>
    `,
    methods : {
        add(){
            this.count ++
        }
    },
    // 聲明周期函數(shù)
    beforeCreate(){
        console.log(this.username)
    },
    created(){
        console.log(this.username)
    },
    beforeMount(){
        let dom = document.getElementById("test")
        // console.log(dom)
    },
    mounted(){
        let dom = document.getElementById("test")
        // console.log(dom)
    },
    beforeUpdate(){
        // console.log("組件即將發(fā)生更新")
    },
    updated(){
        // console.log("組件已經(jīng)發(fā)生更新")
    },
    beforeDestroy(){
        // console.log("組件即將被卸載")
    },
    destroyed(){
        // console.log("組件已經(jīng)被卸載")
    }
}

整個生命周期的圖示為：

lifecycle.png

2、更新期

運行期間的生命周期函數(shù)：beforeUpdate 和 updated

7.png

3、卸載期

銷毀期間的生命周期函數(shù)：beforeDestroy 和 destroyed

8.png

三、生命周期函數(shù)詳解

創(chuàng)建期間：

• beforeCreate：表示實例完全被創(chuàng)建出來之前，會執(zhí)行beforeCreate函數(shù)，這時data 和 methods 中的 數(shù)據(jù)都還沒有沒初始化，如果調用data和methods的數(shù)據(jù)的話，會報錯。
• created：實例已經(jīng)在內存中創(chuàng)建OK，此時 data 和 methods 已經(jīng)創(chuàng)建OK，此時還沒有開始 編譯模板。
• beforeMount：此時已經(jīng)完成了模板的編譯，但是還沒有從內存掛載到頁面中。

注意：在 beforeMount 執(zhí)行的時候，頁面中的元素，還沒有被真正替換過來，只是之前寫的一些模板（比如插值表達式）還只是字符串的形式。

• mounted： 此時，已經(jīng)將編譯好的模板，掛載到了頁面指定的容器中顯示。

運行期間：

• beforeUpdate：data數(shù)據(jù)更新之后，但是還未渲染到頁面時執(zhí)行的函數(shù)。這時data數(shù)據(jù)已經(jīng)更新，但是頁面的數(shù)據(jù)還是舊的。
• updated：updated 事件執(zhí)行的時候，頁面和 data 數(shù)據(jù)已經(jīng)保持同步了，都是最新的。

銷毀期間：

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

示例代碼：

export let User = {
    data(){
        return {
            username: "zhuiszhu",
            count : 0
        }
    },
    template : `
        <div>
            <h3 id="test">{{username}}</h3>
            <p>用戶中心頁頁面內容</p>
            <p>{{count}}</p>
            <button @click="add">+</button>
        </div>
    `,
    methods : {
        add(){
            this.count ++
        }
    },
    // 聲明周期函數(shù)
    beforeCreate(){
        console.log(this.username)
    },
    created(){
        console.log(this.username)
    },
    beforeMount(){
        let dom = document.getElementById("test")
        // console.log(dom)
    },
    mounted(){
        let dom = document.getElementById("test")
        // console.log(dom)
    },
    beforeUpdate(){
        // console.log("組件即將發(fā)生更新")
    },
    updated(){
        // console.log("組件已經(jīng)發(fā)生更新")
    },
    beforeDestroy(){
        // console.log("組件即將被卸載")
    },
    destroyed(){
        // console.log("組件已經(jīng)被卸載")
    }
}

整個生命周期的圖示為：

lifecycle.png