Suggest an editImprove this articleRefine the answer for “When is mounted called?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**`mounted`** is a Vue lifecycle hook that is called after the component has been created, rendered into the virtual DOM, and inserted as a real DOM element into the document. **Key point:** by the time mounted runs, the real DOM, `refs`, and all mounted child components are already available, which makes it the safe place for DOM manipulation and initializing third-party libraries.Shown above the full answer for quick recall.Answer (EN)ImageThe `mounted` hook is called **after** the component: 1. has been created, 2. has rendered the virtual DOM, 3. and **has inserted the real DOM element into the document**. In simpler terms: > `mounted` **is called when the component is fully present in the DOM and you can work with it.** --- ## What is available in mounted? At this point, you already have: - access to the real DOM - access to `refs` - reactive data and props - computed - watchers - all child components are also mounted So you can safely perform **DOM manipulations**. --- ## Example: ```vue <template> <input ref="inputEl"> </template> <script> export default { mounted() { this.$refs.inputEl.focus(); // works! } } </script> ``` --- ## When exactly is mounted called? Phases: 1. The hooks ran: `beforeCreate` → `created`. 2. Vue created the virtual DOM. 3. `beforeMount` ran. 4. Vue inserted the generated DOM into the page. 5. **Now** `mounted` **is called.** --- ## What is usually done in mounted? #### 1. Working with the DOM directly: ```js this.$refs.canvas.getContext('2d') ``` #### 2. Initializing third-party libraries: - charts (Chart.js, ECharts) - carousels - maps (Leaflet, Google Maps) - tooltips - datepickers #### 3. Working with setInterval / setTimeout #### 4. Connecting a WebSocket (sometimes this is done in created, but mounted is safer for the UI) #### 5. API requests, if the data matters after the UI renders (though this is usually done in created) --- ## When should you NOT use mounted? #### Do not use it for heavy operations Because mounted is the moment when the UI becomes visible. If the hook is slow, the UI will "freeze". #### Do not mutate data endlessly Changing data right after mounted can trigger an extra render.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.