Vue.js生命周期：深入理解組件的誕生、成長(zhǎng)與銷毀

幼稚園新童鞋 2023-07-26 10:04:27 瀏覽數(shù) (1689)

反饋

Vue.js是一款流行的JavaScript前端框架，它擁有豐富的生命周期鉤子函數(shù)，用于控制組件在不同階段的行為。生命周期鉤子函數(shù)允許開發(fā)者在組件不同的生命周期階段執(zhí)行自定義的操作，從而更好地管理組件的行為和狀態(tài)。本文將為您詳細(xì)介紹Vue.js的生命周期，并解釋每個(gè)階段的用途和執(zhí)行順序。

Vue.js組件生命周期圖示

在深入探討生命周期之前，讓我們先來(lái)了解Vue.js組件的生命周期圖示：

beforeCreate -> created -> beforeMount -> mounted -> beforeUpdate -> updated -> beforeDestroy -> destroyed

Vue.js生命周期詳解

beforeCreatebeforeCreate鉤子函數(shù)是組件被創(chuàng)建之初的階段。在此階段，Vue實(shí)例已經(jīng)被創(chuàng)建，但數(shù)據(jù)和事件都還未初始化。此時(shí)，您可以做一些組件級(jí)別的初始化操作，但無(wú)法訪問(wèn)到data、props、methods等屬性。
createdcreated鉤子函數(shù)表示組件已經(jīng)完成數(shù)據(jù)初始化階段。在此階段，Vue實(shí)例的data、props等屬性已經(jīng)可以被訪問(wèn)。您可以在這里執(zhí)行一些異步操作，比如請(qǐng)求數(shù)據(jù)，或?qū)?shù)據(jù)進(jìn)行進(jìn)一步處理。
beforeMountbeforeMount鉤子函數(shù)是組件即將被掛載到DOM節(jié)點(diǎn)的前一刻。在這個(gè)階段，組件的模板已經(jīng)編譯完成，但尚未渲染到頁(yè)面上。
mountedmounted鉤子函數(shù)表示組件已經(jīng)被掛載到DOM節(jié)點(diǎn)上并渲染完成。在這個(gè)階段，您可以訪問(wèn)到組件的DOM元素，并進(jìn)行一些DOM操作，或者與第三方庫(kù)進(jìn)行交互。
beforeUpdatebeforeUpdate鉤子函數(shù)在組件數(shù)據(jù)更新之前被調(diào)用。在這個(gè)階段，組件的數(shù)據(jù)已經(jīng)發(fā)生了變化，但DOM尚未重新渲染。您可以在此階段執(zhí)行一些更新前的準(zhǔn)備工作。
updatedupdated鉤子函數(shù)表示組件的數(shù)據(jù)已經(jīng)更新完成，并且DOM已經(jīng)重新渲染。在這個(gè)階段，您可以執(zhí)行與更新后的DOM相關(guān)的操作，但要注意避免無(wú)限循環(huán)更新。
beforeDestroybeforeDestroy鉤子函數(shù)在組件即將被銷毀之前調(diào)用。在這個(gè)階段，組件實(shí)例仍然可用，您可以做一些清理工作，比如清除定時(shí)器、取消訂閱等。
destroyeddestroyed鉤子函數(shù)表示組件已經(jīng)被銷毀。在這個(gè)階段，組件實(shí)例及其相關(guān)的DOM已經(jīng)完全被清理，您可以做一些最后的資源釋放工作。

生命周期實(shí)例演示

讓我們通過(guò)一個(gè)簡(jiǎn)單的示例來(lái)演示Vue.js生命周期的執(zhí)行順序：

<!DOCTYPE html>
<html>
<head>
    <title>Vue.js Lifecycle</title>
</head>
<body>
    <div id="app">
        <p>{{ message }}</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello, Vue.js!'
            },
            beforeCreate() {
                console.log('beforeCreate');
            },
            created() {
                console.log('created');
            },
            beforeMount() {
                console.log('beforeMount');
            },
            mounted() {
                console.log('mounted');
            },
            beforeUpdate() {
                console.log('beforeUpdate');
            },
            updated() {
                console.log('updated');
            },
            beforeDestroy() {
                console.log('beforeDestroy');
            },
            destroyed() {
                console.log('destroyed');
            }
        });
    </script>
</body>
</html>

打開瀏覽器的開發(fā)者工具，在控制臺(tái)中可以看到生命周期的執(zhí)行順序。首次加載頁(yè)面時(shí)，依次輸出beforeCreate、created、beforeMount、mounted，然后在控制臺(tái)中修改數(shù)據(jù)，可以觀察到beforeUpdate和updated的輸出。最后，刷新頁(yè)面或關(guān)閉頁(yè)面時(shí)，輸出beforeDestroy和destroyed。

結(jié)論

Vue.js生命周期鉤子函數(shù)為開發(fā)者提供了在不同階段執(zhí)行自定義操作的能力，幫助我們更好地管理組件的狀態(tài)和行為。通過(guò)深入理解Vue.js的生命周期，您可以更加高效地開發(fā)和維護(hù)現(xiàn)代化的前端應(yīng)用。無(wú)論是處理初始化操作、異步請(qǐng)求，還是資源清理和釋放，生命周期鉤子函數(shù)都能幫助您在組件的誕生、成長(zhǎng)與銷毀過(guò)程中做好控制。

前端開發(fā)體系課推薦：前端開發(fā)：零基礎(chǔ)入門到項(xiàng)目實(shí)戰(zhàn)

Vue.js

0 人點(diǎn)贊