Какие методы жизненного цикла VueJS (vue 2 и vue 3)

В Vue.js, как и в других JavaScript-фреймворках, важно понимать концепцию жизненного цикла компонента. Каждый компонент проходит через несколько этапов за время своего существования: от создания до разрушения. Эти этапы называются методами жизненного цикла.

Жизненный цикл компонента

Методы жизненного цикла делятся на несколько категорий:

1. Создание: Когда компонент создается.
2. Изменения: Когда происходит изменение состояния или свойств компонента.
3. Уничтожение: Когда компонент удаляется из DOM.

Методы жизненного цикла в Vue 2

Вот основные методы жизненного цикла в Vue 2:

• beforeCreate(): Вызывается сразу после создания экземпляра Vue, до того, как данные наблюдаются и вычисляемые свойства установлены.
• created(): Вызывается после того, как экземпляр создан. Здесь можно производить асинхронные запросы, доступ к данным.
• beforeMount(): Вызывается перед первой отрисовкой компонента.
• mounted(): Вызывается после первой отрисовки компонента. Здесь компонент уже доступен в DOM и можно работать с ним.
• beforeUpdate(): Вызывается перед обновлением компонента, когда данные изменяются.
• updated(): Вызывается после обновления компонента, если произошли изменения.
• beforeDestroy(): Вызывается перед удалением компонента.
• destroyed(): Вызывается после удаления компонента.

Пример использования методов жизненного цикла в Vue 2:

new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    },
    created() {
        console.log('Компонент создан и данные доступны');
    },
    mounted() {
        console.log('Компонент смонтирован на страницу');
    },
    updated() {
        console.log('Компонент обновлен');
    },
    beforeDestroy() {
        console.log('Компонент будет уничтожен');
    },
    destroyed() {
        console.log('Компонент уничтожен');
    }
});

Методы жизненного цикла в Vue 3

С Vue 3 были внесены некоторые изменения и улучшения. В частности, используется Composition API. Тем не менее, методы жизненного цикла остались схожими, но их использование в новом API выглядит немного иначе.

Так выглядят основные методы жизенного цикла в Vue 3:

• onBeforeMount()
• onMounted()
• onBeforeUpdate()
• onUpdated()
• onBeforeUnmount()
• onUnmounted()

Пример использования методов жизненного цикла в Vue 3:

import {createApp, onMounted, onUnmounted} from 'vue';

const app = createApp({
    setup() {
        onMounted(() => {
            console.log('Компонент смонтирован на страницу');
        });

        onUnmounted(() => {
            console.log('Компонент уничтожен');
        });

        return {
            message: 'Hello Vue 3!'
        };
    }
});

app.mount('#app');

Заключение

Понимание методов жизненного цикла поможет вам лучше контролировать ваше приложение и его взаимодействие с DOM и данными. Используйте их для инициализации, обработки изменений и очистки ресурсов, чтобы ваше приложение работало эффективно и без утечек памяти.