Что такое хуки жизненного цикла во Vue?

Что такое хуки жизненного цикла во Vue?

Хуки жизненного цикла (Lifecycle Hooks) в Vue — это специальные функции, которые позволяют разработчику выполнять код на определённых этапах "жизни" компонента: от его создания, обновления до уничтожения. Эти хуки предоставляют точки входа в ключевые моменты жизненного цикла, что даёт полный контроль над поведением компонента. Понимание жизненного цикла критически важно для правильной инициализации данных, работы с DOM, выполнения сторонних библиотек, очистки ресурсов и оптимизации производительности.

Основные этапы жизненного цикла компонента Vue

Жизненный цикл компонента Vue можно разделить на четыре основные фазы:

1. Создание (Creation) – инициализация компонента (настройка наблюдения за данными, вычисляемыми свойствами, методами и т.д.).
2. Монтирование (Mounting) – вставка компонента в DOM.
3. Обновление (Updating) – перерисовка компонента в ответ на изменение реактивных данных.
4. Размонтирование (Unmounting) – удаление компонента из DOM.

Каждой из этих фаз соответствуют свои хуки, вызываемые синхронно на конкретном этапе.

Основные хуки жизненного цикла и их применение

Рассмотрим ключевые хуки в порядке их вызова.

1. beforeCreate

Вызывается самым первым, сразу после инициализации экземпляра. На этом этапе реактивность данных и события ещё не настроены. Доступ к data, computed, methods отсутствует.

export default {
  beforeCreate() {
    console.log(this.message); // undefined
    console.log('Экземпляр только что инициализирован');
  },
  data() {
    return {
      message: 'Hello!'
    };
  }
}

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

2. created

Один из самых часто используемых хуков. Вызывается после настройки реактивности данных, вычисляемых свойств, методов и наблюдения. Однако на этом этапе компонент ещё не смонтирован в DOM ($el недоступен).

export default {
  data() {
    return {
      posts: []
    };
  },
  async created() {
    // Идеальное место для получения начальных данных с API
    const response = await fetch('/api/posts');
    this.posts = await response.json();
    // Доступ к реактивным данным есть, но DOM ещё нет
    console.log(this.posts.length);
  }
}

Типичное использование: выполнение асинхронных запросов для начального заполнения данных, инициализация сторонних библиотек, не требующих DOM.

3. beforeMount

Вызывается непосредственно перед началом монтирования компонента в DOM. На этом этапе шаблон уже скомпилирован, но компонент ещё не вставлен в страницу. $el по-прежнему содержит начальное значение (например, undefined в Composition API или placeholder-элемент).

4. mounted

Критически важный хук. Вызывается после того, как компонент был смонтирован в DOM. Теперь $el и все дочерние компоненты доступны. Это первая точка, где вы можете безопасно взаимодействовать с DOM.

export default {
  mounted() {
    // Идеальное место для работы с DOM или библиотеками, зависящими от него (например, D3.js, инициализация карт)
    const chartElement = this.$refs.chartCanvas;
    this.initChart(chartElement);

    // Также можно подписаться на глобальные события (например, resize)
    window.addEventListener('resize', this.handleResize);
  },
  methods: {
    initChart(el) { /* ... */ },
    handleResize() { /* ... */ }
  }
}

Типичное использование: работа с DOM, интеграция сторонних библиотек, требующих DOM-элементов, подписка на глобальные события.

5. beforeUpdate

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

export default {
  data() {
    return { list: [] };
  },
  beforeUpdate() {
    // Сохраняем высоту контейнера перед обновлением
    this.previousScrollHeight = this.$refs.listContainer.scrollHeight;
  }
}

6. updated

Вызывается после того, как виртуальный DOM был перерисован и все изменения применены к реальному DOM. Будьте осторожны: изменение реактивных данных внутри этого хука может привести к бесконечному циклу обновлений!

export default {
  updated() {
    // Хорошо: логирование, работа с DOM после обновления Vue
    console.log('Компонент обновлён');
    // Плохо: this.someData = newValue; // Может вызвать новый цикл обновления!
  }
}

Типичное использование: выполнение операций, зависящих от окончательного состояния DOM после обновления (например, программная прокрутка к новому элементу списка).

7. beforeUnmount (Vue 3) / beforeDestroy (Vue 2)

Вызывается непосредственно перед началом размонтирования компонента. Компонент всё ещё полностью функционален.

export default {
  beforeUnmount() {
    // Критически важно очистить всё, что может привести к утечкам памяти
    window.removeEventListener('resize', this.handleResize);
    clearInterval(this.timerId);
    if (this.chartInstance) {
      this.chartInstance.destroy();
    }
  }
}

8. unmounted (Vue 3) / destroyed (Vue 2)

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

export default {
  unmounted() {
    console.log('Компонент уничтожен. Все ресурсы очищены.');
  }
}

Важные замечания и лучшие практики

• Асинхронные операции: Хотя в хуках можно выполнять асинхронные операции (например, в created), сами хуки вызываются синхронно. Vue не будет ждать завершения вашего async created() перед переходом к следующему этапу.
• Composition API: В Composition API (setup()) основные хуки жизненного цикла доступны как функции (например, onMounted, onUpdated). Их логика импортируется и вызывается внутри setup().

  import { onMounted, onUnmounted, ref } from 'vue';
  
  export default {
    setup() {
      const count = ref(0);
      onMounted(() => {
        console.log('Компонент смонтирован!');
      });
      onUnmounted(() => {
        console.log('Компонент будет размонтирован');
      });
      return { count };
    }
  };
  

• Избегайте сайд-эффектов в updated: Часто ошибкой является размещение логики, реагирующей на изменение данных, в updated. Для этой цели лучше использовать наблюдатели (watch) или вычисляемые свойства (computed).

Итог: Хуки жизненного цикла — это мощный механизм Vue, который позволяет разработчику точно контролировать поведение компонента на всех этапах его существования. Правильное их использование — залог создания отзывчивых, производительных и корректно работающих приложений без утечек памяти.