> В чем разница хуков mounted и beforeMount во Vue (Vue.js)

Короткий ответ

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

Подробное объяснение

Оба хука относятся к этапу монтирования компонента в жизненном цикле Vue. beforeMount срабатывает сразу после того, как Vue скомпилировал шаблон в render-функцию и создал Virtual DOM, но до того, как этот Virtual DOM будет преобразован в реальные DOM-узлы и вставлен в документ. На этом этапе this.$el ещё не существует как реальный элемент - он указывает на placeholder или undefined.

mounted вызывается после того, как компонент полностью отрендерен и все его DOM-узлы добавлены в дерево документа. Здесь this.$el - это реальный DOM-элемент, доступны ссылки через ref, можно выполнять операции с DOM, подключать сторонние библиотеки, которые требуют наличия DOM-узлов.

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

На практике

Для senior-разработчика важно понимать, что beforeMount - это точка, где можно перехватить процесс монтирования, но нельзя полагаться на DOM. Типичный use case - инициализация данных, которые должны быть доступны перед рендерингом, или отмена монтирования через условную логику.

mounted - основное место для работы с DOM: установка фокуса, измерение размеров элементов, интеграция с jQuery или D3, подписка на события window/document, запуск анимаций. Также здесь безопасно вызывать методы дочерних компонентов через refs.

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

Пример кода

JAVASCRIPT
export default {
  data() {
    return {
      items: []
    }
  },
  beforeMount() {
    // DOM ещё нет - нельзя делать this.$el.querySelector
    // Можно подготовить данные
    this.items = this.preprocessData(this.rawItems)
    // Нельзя: this.$refs.list.scrollTop = 0
  },
  mounted() {
    // DOM готов - можно работать
    this.$refs.input.focus()
    this.scrollPosition = this.$el.scrollTop
    
    // Подписка на события, требующие DOM
    window.addEventListener('resize', this.handleResize)
    
    // Если нужно дождаться всех потомков
    this.$nextTick(() => {
      // Все дочерние компоненты точно смонтированы
    })
  },
  beforeUnmount() {
    // Очистка подписок, сделанных в mounted
    window.removeEventListener('resize', this.handleResize)
  }
}

Как отвечать на собеседовании

Начни с чёткого определения: beforeMount - перед созданием DOM, mounted - после. Подчеркни практические последствия: доступность $el, refs, DOM-операций. Упомяни, что beforeMount используется редко, в основном для оптимизаций или специфических кейсов. Добавь про $nextTick в mounted для гарантии полного монтирования дерева. Если спросят про Server-Side Rendering - отметь, что mounted не вызывается на сервере, а beforeMount вызывается.

Что проверяет интервьюер

• Понимание жизненного цикла Vue и порядка выполнения хуков
• Знание, когда DOM становится доступным
• Умение выбирать правильный хук для конкретной задачи
• Понимание разницы между Virtual DOM и реальным DOM
• Awareness про особенности SSR (если релевантно)

Типичные ошибки

• Попытка обратиться к this.$el в beforeMount - получите undefined или placeholder
• Размещение подписок на события window в beforeMount - они могут не сработать или привести к утечкам
• Использование mounted для операций, которые можно выполнить раньше (например, простая инициализация данных)
• Предположение, что в mounted все потомки уже смонтированы - без $nextTick это не гарантировано
• Путаница с хуками Vue 2 Options API vs Composition API (onBeforeMount, onMounted) - суть та же, но синтаксис другой