Порядок выполнения хуков

Vue.js использует жизненный цикл компонентов, который позволяет контролировать различные стадии их создания, обновления и уничтожения. Основу управления этим процессом составляют хуки жизненного цикла — специальные методы, автоматически вызываемые фреймворком в строго определённом порядке.

1. Фаза инициализации

На этапе инициализации создаётся экземпляр компонента, происходит подготовка всех реактивных свойств и вычисляемых данных.

Основные хуки:

  • beforeCreate — вызывается перед созданием реактивных данных и событий. В этот момент data, computed, methods ещё недоступны.
  • created — вызывается после инициализации реактивных данных, но до монтирования DOM. Можно обращаться к data, methods, использовать вычисляемые свойства, однако доступа к DOM ещё нет.

Пример:

export default {
  data() {
    return { message: 'Привет, Vue!' };
  },
  beforeCreate() {
    console.log('beforeCreate: this.message ещё недоступно', this.message);
  },
  created() {
    console.log('created: this.message уже доступно', this.message);
  }
}

2. Фаза монтирования

Монтирование отвечает за создание виртуального DOM и привязку его к реальному DOM.

Основные хуки:

  • beforeMount — вызывается перед тем, как виртуальный DOM будет смонтирован на страницу. На этом этапе шаблон уже скомпилирован, но реальный DOM ещё не создан.
  • mounted — вызывается после того, как компонент был смонтирован на страницу. Доступен реальный DOM, можно выполнять операции с элементами, подключать сторонние библиотеки.

Пример:

export default {
  mounted() {
    console.log('Компонент смонтирован, можно работать с DOM', this.$el);
  }
}

3. Фаза обновления

Когда изменяются реактивные данные, Vue обновляет виртуальный DOM и синхронизирует его с реальным.

Основные хуки:

  • beforeUpdate — вызывается перед обновлением виртуального DOM, но после того как реактивные данные изменились. Можно использовать для подготовки данных к обновлению или анализа изменений.
  • updated — вызывается после обновления DOM. Можно безопасно работать с обновлёнными элементами, например, измерять размеры или применять дополнительные стили.

Пример:

export default {
  data() {
    return { count: 0 };
  },
  updated() {
    console.log('DOM обновлён, текущий count:', this.count);
  }
}

4. Фаза уничтожения

При удалении компонента из DOM важно корректно освобождать ресурсы и отписываться от внешних событий.

Основные хуки:

  • beforeUnmount — вызывается перед удалением компонента. Можно остановить таймеры, удалить слушатели событий.
  • unmounted — вызывается после удаления компонента из DOM. Все связи компонента разорваны, доступ к DOM отсутствует.

Пример:

export default {
  beforeUnmount() {
    console.log('Компонент будет удалён, останавливаем таймеры');
  },
  unmounted() {
    console.log('Компонент удалён из DOM');
  }
}

5. Особенности порядка вызова хуков

  • Сначала вызываются хуки родительского компонента, затем дочернего при инициализации.
  • При обновлении сначала обновляются дочерние компоненты, потом родительские.
  • Хуки beforeCreate и created вызываются только один раз, а beforeUpdate и updated — каждый раз при изменении данных.

6. Асинхронные операции в хуках

Для асинхронной работы можно использовать промисы или async/await. Например, mounted часто используют для загрузки данных с сервера:

export default {
  async mounted() {
    const response = await fetch('/api/data');
    this.data = await response.json();
  }
}

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

7. Взаимодействие с Composition API

При использовании Composition API жизненный цикл управляется через функции вроде onMounted, onUpdated, onUnmounted. Они вызываются в том же порядке, что и Options API, но позволяют привязывать логику непосредственно к функциональной части компонента.

Пример:

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

export default {
  setup() {
    const count = ref(0);

    onMounted(() => console.log('Component mounted'));
    onUnmounted(() => console.log('Component unmounted'));

    return { count };
  }
}

8. Рекомендации по использованию

  • Использовать beforeCreate и created для инициализации данных.
  • mounted подходит для работы с DOM и сторонними библиотеками.
  • beforeUpdate и updated эффективны для отслеживания изменений и реактивного реагирования.
  • beforeUnmount и unmounted — для очистки ресурсов и предотвращения утечек памяти.

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

Оглавление