Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Коли викликається mounted?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`mounted`** - це хук життєвого циклу Vue, який викликається після того, як компонент створено, відрендерено у віртуальний DOM і вставлено як реальний DOM-елемент у документ. **Ключове:** у mounted вже доступні реальний DOM, `refs` та всі змонтовані дочірні компоненти, тому саме тут безпечно робити DOM-маніпуляції та ініціалізувати сторонні бібліотеки.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняХук `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 може викликати зайвий рендер.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.