В чем разница хуков mounted и beforeMount во Vue

Что проверяют

Понимаете ли вы порядок жизненного цикла и знаете ли, где появляется доступ к DOM. Простой вопрос, но за ним обычно идёт «а где делать запрос за данными».

Как отвечать

beforeMount вызывается после подготовки компонента, но до вставки в DOM: реактивные данные уже доступны, а элементов на странице ещё нет, поэтому this.$el и ref не работают.

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

Что стоит добавить:

• где грузить данные: в mounted привычно, но запрос можно начинать раньше, в created или setup, чтобы не ждать монтирования. Ответ всё равно придёт асинхронно, а старт на один шаг раньше;
• парность: всё, что заведено в mounted, снимается в unmounted или beforeUnmount: обработчики окна, таймеры, наблюдатели, экземпляры библиотек. Иначе получается утечка при переходах между экранами;
• дети монтируются раньше родителя: mounted дочернего компонента выполняется до mounted родителя, и это важно, когда родитель опирается на размеры детей;
• обновление DOM асинхронно: изменили данные и хотите увидеть новый DOM, нужен await nextTick();
• в Composition API это onBeforeMount и onMounted, а сам setup выполняется раньше обоих и заменяет created.

Где спотыкаются

Обращаются к ref в beforeMount и получают undefined.

Вешают слушатель на window в mounted и забывают снять его при уходе с экрана.

Читают DOM сразу после изменения данных, не дождавшись nextTick, и видят старые значения.