App下載

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

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

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

Vue.js組件生命周期圖示

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

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

Vue.js生命周期詳解

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

生命周期實例演示

讓我們通過一個簡單的示例來演示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ā)者工具，在控制臺中可以看到生命周期的執(zhí)行順序。首次加載頁面時，依次輸出beforeCreate、created、beforeMount、mounted，然后在控制臺中修改數(shù)據(jù)，可以觀察到beforeUpdate和updated的輸出。最后，刷新頁面或關閉頁面時，輸出beforeDestroy和destroyed。

結論

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

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

Vue.js

0 人點贊