Хук mounted в Nuxt 3

В Nuxt 3 хук mounted является частью жизненного цикла компонента Vue и имеет некоторые особенности при использовании с SSR. Давайте разберемся, что это за особенности и как их можно учитывать в своей работе.

Особенности хука mounted

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

Этот момент идеально подходит для выполнения операций, которые зависят от присутствия компонента на странице, например, доступ к элементам DOM для изменения их стиля или получения размеров.

Подробнее в базовом курсе по Nuxt.

Доступ к DOM

В mounted у вас есть полный доступ к DOM, поэтому это подходящее место для выполнения операций, требующих доступа к элементам DOM или их измерения. Операции, такие как изменение атрибутов элементов или работа с анимациями, также часто выполняются в этом хуке.

Пример использования mounted в компоненте Nuxt 3

Пример использования mounted в компоненте Nuxt 3:

<template>

  <div ref="myElement">{{ message }}</div>

</template>

<script setup>

import { ref, onMounted } from 'vue'

const myElement = ref(null)

const message = ref('Привет, Nuxt 3!')

onMounted(() => {

  console.log('Компонент смонтирован')

  console.log(myElement.value.getBoundingClientRect())

})

</script>

Сценарии использования хука mounted

1. Работа с DOM: После того как компонент добавлен в DOM, можно манипулировать его элементами.

2. Обработчики событий: Установка слушателей событий, которые зависят от элементов DOM.

3. API-запросы: Выполнение запросов для загрузки данных, которые нужны компоненту для отображения.

Не стоит выполнять слишком сложные задачи в хуке mounted, так как это может замедлить рендеринг компонента.

Больше информации по работе с Nuxt в видеокурсах.