Skip to main content

Коли викликається mounted?

VueJunior~1 хв читання
Запропонувати правку

Хук mounted викликається після того, як компонент:

  1. був створений,
  2. відрендерив віртуальний DOM,
  3. і вставив реальний DOM-елемент у документ.

Простіше кажучи:

mounted викликається, коли компонент повністю присутній у DOM і з ним можна працювати.

Що доступно в mounted?

У цей момент вже є:

  • доступ до реального DOM
  • доступ до refs
  • реактивні дані та props
  • computed
  • watchers
  • усі дочірні компоненти теж змонтовані

Тобто можна безпечно робити DOM-маніпуляції.

Приклад:

vue
<template> <input ref="inputEl"> </template> <script> export default { mounted() { this.$refs.inputEl.focus(); // працює! } } </script>

Коли саме викликається mounted?

Фази:

  1. Виконалися хуки: beforeCreate → created.
  2. Vue створив віртуальний DOM.
  3. Виконався beforeMount.
  4. Vue вставив згенерований DOM на сторінку.
  5. Тепер викликається mounted.

Що зазвичай роблять у mounted?

1. Робота з DOM напряму:

js
this.$refs.canvas.getContext('2d')

2. Ініціалізація сторонніх бібліотек:

  • charts (Chart.js, ECharts)
  • carousels
  • maps (Leaflet, Google Maps)
  • tooltips
  • datepickers

3. Робота з setInterval / setTimeout

4. Підключення WebSocket

(іноді це роблять у created, але mounted - безпечніше для UI)

5. Запити API, якщо дані важливі після рендера UI

(хоча зазвичай їх роблять у created)

Коли НЕ варто використовувати mounted?

Не використовувати для важких операцій

Тому що mounted - момент, коли UI стає видимим. Якщо хук гальмує - UI "зависне".

Не мутувати дані нескінченно

Зміна даних одразу після mounted може викликати зайвий рендер.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку