Какой порядок выполнения хуков во Vue?

Порядок выполнения хуков жизненного цикла во Vue

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

Общая последовательность хуков

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

1. Инициализация (Setup)

    *   `beforeCreate`
    *   `created`

1. Монтирование (Mounting)

    *   `beforeMount`
    *   `mounted`

1. Обновление (Updating)

    *   `beforeUpdate`
    *   `updated`

1. Размонтирование (Unmounting)

    *   `beforeUnmount` (в Vue 2: `beforeDestroy`)
    *   `unmounted` (в Vue 2: `destroyed`)

Детальное описание каждого этапа

Фаза 1: Инициализация (beforeCreate, created)

На этом этапе компонент готовится к созданию. Система реактивности еще не настроена.

• beforeCreate(): Хук вызывается сразу после инициализации экземпляра, но до настройки опций данных (data), вычисляемых свойств (computed), методов (methods) и наблюдателей (watchers). На этом этапе нельзя получить доступ к реактивным данным или методам компонента. Обычно используется для инициализации глобальных событий или инъекций плагинов.

  export default {
    beforeCreate() {
      console.log('beforeCreate: data is', this.message); // undefined
      console.log('beforeCreate: method is', this.someMethod); // undefined
    },
    data() {
      return { message: 'Hello' };
    },
    methods: {
      someMethod() { /* ... */ }
    }
  }
  

• created(): Хук вызывается после того, как экземпляр полностью создан. На этом этапе доступны реактивные данные (data), вычисляемые свойства (computed), методы (methods) и наблюдатели (watchers). Однако виртуальный DOM еще не создан и не смонтирован ($el свойство все еще undefined). Это идеальное место для выполнения AJAX-запросов для начальной загрузки данных, инициализации таймеров или подписки на внешние события.

  export default {
    data() {
      return { posts: [] };
    },
    async created() {
      // Данные уже реактивны, DOM еще нет
      const response = await fetch('/api/posts');
      this.posts = await response.json(); // Корректно обновит реактивные данные
      console.log('created: $el is', this.$el); // undefined
    }
  }
  

Фаза 2: Монтирование (beforeMount, mounted)

Эта фаза связана с первоначальной компиляцией шаблона и вставкой компонента в реальный DOM.

• beforeMount(): Вызывается непосредственно перед началом рендеринга и компиляции шаблона в виртуальный DOM, а также перед первым вызовом render. В этот момент шаблон и стили уже скомпилированы, но компонент еще не вставлен в DOM. $el также будет undefined. Этот хук используется редко.

• mounted(): Ключевой хук, который вызывается после того, как экземпляр был смонтирован в DOM. Теперь $el содержит ссылку на корневой элемент компонента. Это первый момент, когда вы можете гарантированно работать с DOM-деревом компонента. Здесь выполняются операции, требующие прямого доступа к DOM: инициализация сторонних библиотек (например, карт, графиков), ручные обработчики событий DOM или измерения элементов.

  export default {
    mounted() {
      // Теперь компонент находится в DOM
      console.log('mounted: $el is', this.$el); // [HTMLDivElement]
      // Инициализация библиотеки, требующей DOM
      this.chart = new Chart(this.$el.querySelector('#chart'), { /* ... */ });
    }
  }
  

    **Важно:** `mounted` не гарантирует, что все дочерние компоненты тоже смонтированы. Если нужно дождаться всего дерева, используйте `$nextTick`.

Фаза 3: Обновление (beforeUpdate, updated)

Эти хуки срабатывают при каждом изменении реактивных данных, которые вызывают повторный рендеринг компонента.

• beforeUpdate(): Вызывается, когда реактивные данные изменились, но до того, как виртуальный DOM будет перерисован и применен к реальному DOM. Это последняя возможность вручную изменить состояние до того, как компонент будет отрисован. Можно использовать для получения "снимка" DOM перед обновлением.

• updated(): Вызывается после того, как виртуальный DOM был перерисован и патчинг DOM завершен. На этом этапе DOM уже отражает изменения данных. Здесь можно выполнять операции, зависящие от обновленного DOM. Однако будьте осторожны с изменением состояния внутри updated, так как это может привести к бесконечному циклу обновлений. Как и с mounted, updated не гарантирует обновления дочерних компонентов.

  export default {
    data() { return { count: 0 }; },
    updated() {
      // DOM теперь обновлен. Осторожно с изменением данных здесь!
      console.log('DOM updated for count:', this.count);
    }
  }
  

Фаза 4: Размонтирование (beforeUnmount, unmounted)

Эта фаза отвечает за очистку перед уничтожением компонента.

• beforeUnmount(): Вызывается непосредственно перед началом размонтирования экземпляра компонента. Компонент все еще полностью функционален. Это идеальное место для выполнения критически важной очистки: отмена таймеров (clearInterval, clearTimeout), отмена активных сетевых запросов (например, через AbortController), отписка от глобальных событий или событий сторонних библиотек (EventBus.$off, window.removeEventListener), очистка ссылок на DOM-элементы, созданные вне Vue.

  export default {
    data() { return { timerId: null }; },
    created() {
      this.timerId = setInterval(() => { /* ... */ }, 1000);
    },
    beforeUnmount() {
      // Критически важно очистить таймер!
      if (this.timerId) {
        clearInterval(this.timerId);
      }
      // Отписка от глобального события
      window.removeEventListener('resize', this.handleResize);
    }
  }
  

• unmounted(): Вызывается после того, как экземпляр компонента полностью размонтирован. Все директивы компонента отвязаны, все слушатели событий удалены, а все дочерние экземпляры Vue также уничтожены. На этом этапе можно выполнить финальную очистку, но доступ к DOM или данным компонента уже невозможен.

Композиционный API (Vue 3)

В Composition API с функцией setup() хуки жизненного цикла представлены в виде отдельных функций (например, onMounted, onUpdated). Их порядок выполнения абсолютно идентичен описанному выше для Options API. Основное отличие — их вызов происходит внутри функции setup() или других реактивных областей видимости (например, effect). Эти функции можно вызывать несколько раз, и они будут зарегистрированы в порядке своего вызова.

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

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

    onMounted(() => {
      console.log('Компонент смонтирован!');
    });

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

    // Хуки можно вызывать несколько раз
    onMounted(() => {
      console.log('Этот хук выполнится после первого');
    });

    return { count };
  }
}

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