Skip to main content

When is mounted called?

VueJunior~1 min read
Suggest an edit

The 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.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit