Расскажите о жизненном цикле компонента vue ?
Спросят с вероятностью 7%

Жизненный цикл компонента Vue.js описывает последовательность этапов, через которые проходит компонент от момента его создания до удаления. Каждый этап жизненного цикла сопровождается вызовом определенных хуков (методов), которые можно использовать для выполнения необходимых операций.

Основные этапы:

1️⃣Создание (Creation):
✅beforeCreate(): Вызывается сразу после инициализации экземпляра, до того как будут установлены реактивные свойства. На этом этапе к экземпляру нельзя получить доступ через this.
✅created(): Вызывается после создания экземпляра и установки реактивных свойств. На этом этапе уже можно получить доступ к данным и методам компонента, но ещё нет привязки к DOM.

        new Vue({
      data() {
        return {
          message: 'Hello Vue!'
        };
      },
      beforeCreate() {
        console.log('beforeCreate');
      },
      created() {
        console.log('created');
        console.log(this.message); // 'Hello Vue!'
      }
    });
    

2️⃣Монтирование (Mounting):
✅beforeMount(): Вызывается перед монтированием компонента в DOM. На этом этапе шаблон ещё не скомпилирован и не вставлен в DOM.
✅mounted(): Вызывается после монтирования компонента в DOM. Здесь уже можно выполнять действия, зависящие от DOM, например, инициализировать сторонние библиотеки, работающие с DOM.

        new Vue({
      el: '#app',
      data() {
        return {
          message: 'Hello Vue!'
        };
      },
      beforeMount() {
        console.log('beforeMount');
      },
      mounted() {
        console.log('mounted');
        console.log(this.$el); // доступ к элементу DOM
      }
    });
    

3️⃣Обновление (Updating):
✅beforeUpdate(): Вызывается перед обновлением DOM, когда изменяется реактивное свойство. На этом этапе можно получить текущее состояние до обновления.
✅updated(): Вызывается после обновления DOM. Этот хук можно использовать для выполнения действий, зависящих от нового состояния DOM.

        new Vue({
      el: '#app',
      data() {
        return {
          message: 'Hello Vue!'
        };
      },
      beforeUpdate() {
        console.log('beforeUpdate');
      },
      updated() {
        console.log('updated');
      },
      methods: {
        updateMessage() {
          this.message = 'Hello World!';
        }
      }
    });
    

4️⃣Размонтирование (Unmounting):
✅beforeUnmount(): Вызывается перед размонтированием компонента и его удалением из DOM. Используется для выполнения очистки, например, отмены таймеров или отписки от событий.
✅unmounted(): Вызывается после того, как компонент был размонтирован и удалён из DOM.

        new Vue({
      el: '#app',
      data() {
        return {
          message: 'Hello Vue!'
        };
      },
      beforeUnmount() {
        console.log('beforeUnmount');
      },
      unmounted() {
        console.log('unmounted');
      },
      methods: {
        destroyComponent() {
          this.$destroy();
        }
      }
    });
    

Жизненный цикл компонента Vue.js включает создание, монтирование, обновление и размонтирование. Каждый этап сопровождается вызовом определенных хуков (beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount, unmounted), которые позволяют выполнять различные действия в нужные моменты жизни компонента.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых