Когда вызывается mounted?

Полный жизненный цикл и момент вызова mounted

mounted — это хук жизненного цикла экземпляра Vue.js, который вызывается после того, как экземпляр компонента был смонтирован в DOM. Это означает, что на момент его выполнения инициализация компонента завершена, шаблон скомпилирован и отрендерен, а DOM-узлы компонента (включая его корневой элемент и все дочерние элементы) уже созданы и вставлены в документ.

Точное место в последовательности жизненного цикла

Чтобы точно понять, когда вызывается mounted, важно рассмотреть всю последовательность хуков инициализации компонента (на примере Vue 3 Composition API с setup() и Options API):

1. beforeCreate (Options API) / начало выполнения setup() (Composition API) — экземпляр инициализирован, но данные и методы ещё не доступны.
2. created (Options API) / конец выполнения setup() — данные реактивности, вычисляемые свойства, методы и события инициализированы и доступны, но DOM ещё не создан.
3. beforeMount — вызывается непосредственно перед началом рендеринга шаблона и создания DOM.
4. (Синхронный процесс рендеринга) — Vue компилирует шаблон, создает виртуальный DOM (VNode) и на его основе создаёт реальные DOM-узлы.
5. mounted — Вот он! DOM создан и вставлен в документ. Компонент "примонтирован".
6. Далее следуют хуки обновления (beforeUpdate, updated) при изменении данных и хуки размонтирования (beforeUnmount, unmounted).

Практические аспекты и использование

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

• Работа с DOM через refs: Обращение к DOM-узлам, помеченным атрибутом ref.

  <template>
    <input ref="myInput" />
  </template>
  
  <script>
  export default {
    mounted() {
      // Теперь элемент точно существует в DOM
      this.$refs.myInput.focus();
    }
  }
  </script>
  

• Интеграция со сторонними библиотеками, которым требуется DOM-элемент для работы (чарты, карты, редакторы, карусели).

  <template>
    <div ref="chartContainer"></div>
  </template>
  
  <script>
  import Chart from 'chart.js/auto';
  
  export default {
    mounted() {
      // Библиотеке Chart.js нужен реальный canvas/DOM-элемент
      new Chart(this.$refs.chartContainer, {
        type: 'line',
        data: { /* ... */ },
        options: { /* ... */ }
      });
    }
  }
  </script>
  

• Отправка запросов на сервер, если данные зависят от размера или положения DOM-элемента.
• Установка слушателей событий на DOM-элементы, которые не обрабатываются через директиву Vue v-on.
• Инициализация таймеров (setInterval) или подписок на внешние события.

Критически важные нюансы и предупреждения

1. mounted НЕ гарантирует, что дочерние компоненты тоже смонтированы. Если ваш компонент содержит дочерние асинхронные или Suspense-компоненты, они могут ещё не быть готовы. Для гарантии можно использовать this.$nextTick() или await nextTick() в Vue 3.

   <script>
   import { nextTick } from 'vue';
   
   export default {
     async mounted() {
       // Ждём следующего тика обновления DOM
       await nextTick();
       // Теперь дочерние компоненты тоже должны быть смонтированы
       console.log('Все дочерние компоненты готовы.');
     }
   }
   </script>
   

2. Не изменяйте реактивные данные, которые влияют на шаблон, в mounted без необходимости. Это вызовет дополнительный цикл обновления (beforeUpdate/updated), что может негативно сказаться на производительности.
3. Для SSR (Server-Side Rendering) хук mounted вызывается ТОЛЬКО на клиенте. Он не выполняется во время рендеринга на сервере. Любую логику, зависящую от браузерного API (например, window, document), нужно оборачивать в проверки или размещать только в этом хуке.
4. В Composition API (<script setup>) эквивалентом является функция onMounted().

   <script setup>
   import { onMounted, ref } from 'vue';
   
   const myElement = ref(null);
   
   onMounted(() => {
     // Логика, аналогичная Options API mounted()
     console.log(myElement.value); // Теперь содержит DOM-элемент
   });
   </script>
   

Сводка

Итак, хук mounted вызывается однократно, сразу после первого успешного рендеринга компонента и вставки его DOM-дерева в документ. Это ключевая точка жизненного цикла для выполнения операций, требующих гарантированного наличия DOM-представления компонента. Однако при его использовании всегда следует помнить о возможной асинхронной природе дочерних компонентов и ограничениях в окружениях SSR.