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

«Когда вызывается mounted» — вопрос из категории Vue, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

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

Пример:

export default {
  mounted() {
    console.log('Компонент вмонтирован!');
    this.$refs.myButton.addEventListener('click', this.handleClick);
  },
  methods: {
    handleClick() {
      console.log('Кнопка нажата!');
    }
  }
}

Важно: mounted не гарантирует, что дочерние компоненты тоже уже вмонтированы. Для этого можно использовать this.$nextTick(). Также, SSR (рендеринг на сервере) не вызывает этот хук.