Что делает хук Mounted во Vue?

Развернутый ответ о хуке mounted в Vue.js

Хук mounted в Vue.js является одним из жизненного цикла компонента и вызывается после того, как компонент был вставлен в DOM (Document Object Model). Это ключевой момент, когда компонент становится активным и видимым в интерфейсе пользователя.

Основное предназначение хука mounted

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

Типичные задачи, выполняемые в mounted

• Инициализация сторонних библиотек, которые требуют DOM-элементов (например, графики, карты, сложные UI-компоненты).
• Загрузка данных из API, когда компонент готов к их отображению.
• Настройка событий, напрямую связанных с DOM (например, использование addEventListener).
• Выполнение измерений размеров или позиций DOM-элементов.
• Интерактивные манипуляции с DOM (например, фокусировка на поле ввода).

Примеры использования

Пример 1: Инициализация сторонней библиотеки (например, карты)

<template>
  <div ref="mapContainer"></div>
</template>

<script>
export default {
  mounted() {
    // Библиотека карт требует реального DOM-элемента для работы
    this.map = new MapLibrary(this.$refs.mapContainer, {
      center: [55.751244, 37.618423],
      zoom: 10
    });
  },
  beforeDestroy() {
    // Важно очищать ресурсы в соответствующем хуке
    if (this.map) {
      this.map.destroy();
    }
  }
}
</script>

Пример 2: Загрузка данных после монтирования

<script>
export default {
  data() {
    return {
      posts: []
    };
  },
  mounted() {
    // Запрос к API выполняется после того, как компонент отображён
    fetch('/api/posts')
      .then(response => response.json())
      .then(data => {
        this.posts = data;
      });
  }
}
</script>

Пример 3: Фокусировка на поле ввода

<template>
  <input ref="usernameInput" type="text" />
</template>

<script>
export default {
  mounted() {
    // DOM-элемент доступен через $refs
    this.$refs.usernameInput.focus();
  }
}
</script>

Важные особенности и ограничения

• Доступ к $refs: В хуке mounted все ссылки (refs) уже доступны и привязаны к реальным DOM-элементам.
• Не гарантирует наличие дочерних компонентов: Если компонент содержит дочерние компоненты, они могут быть ещё не монтированы. Для работы с ними можно использовать this.$nextTick().
• Не подходит для SSR: В режиме Server-Side Rendering (SSR) хук mounted не вызывается, поскольку на сервере нет DOM. Для SSR используются хуки, которые работают на стороне сервера (created, beforeMount).
• Очистка ресурсов: Если в mounted вы создаёте сторонние ресурсы (слушатели событий, интерактивные библиотеки), важно очищать их в хуке beforeDestroy или destroyed.

Сравнение с другими хуками жизненного цикла

• beforeMount: Вызывается перед монтировкой, когда виртуальный DOM уже создан, но не вставлен в реальный DOM.
• created: Компонент создан, данные и события настроены, но DOM ещё не существует.
• updated: Вызывается после изменения данных и перерисовки DOM (не после первоначального монтирования).

Практический совет

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

<script>
export default {
  mounted() {
    this.$nextTick(() => {
      // Код выполнится после того, как весь компонент (включая детей) будет в DOM
      console.log('Полностью монтирован, включая дочерние компоненты');
    });
  }
}
</script>

Хук mounted — это мощный инструмент для выполнения "живых" операций с компонентом после его интеграции в DOM. Правильное использование этого хука позволяет эффективно управлять сторонними библиотеками, данными и пользовательским взаимодействием в Vue.js приложениях.