Vue 3 Основные хуки жизненного цикла

Vue 3 предоставляет следующие основные хуки:

• onMounted Вызывается после монтирования компонента в DOM
• onUpdated Срабатывает при обновлении компонента
• onUnmounted Вызывается перед удалением компонента
• onBeforeMount Срабатывает прямо перед монтированием
• onBeforeUpdate Вызывается перед обновлением
• onBeforeUnmount Срабатывает перед размонтированием

Базовый пример с TypeScript

<script setup lang="ts">
import { onMounted, onUpdated, onUnmounted } from 'vue'

onMounted(() => {
  console.log('Компонент смонтирован')
})

onUpdated(() => {
  console.log('Компонент обновлен')
})

onUnmounted(() => {
  console.log('Компонент будет удален')
})
</script>

Практика: Загрузка данных при mounted

Самый распространенный случай использования onMounted — загрузка данных с API

<template>
  <div>
    <h1>Список пользователей</h1>
    <div v-if="loading">Загрузка...</div>
    <div v-else-if="error">{{ error }}</div>
    <ul v-else>
      <li v-for="user in users" :key="user.id">
        {{ user.name }} ({{ user.email }})
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

interface User {
  id: number
  name: string
  email: string
}

const users = ref<User[]>([])
const loading = ref(true)
const error = ref<string | null>(null)

onMounted(async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users')
    if (!response.ok) throw new Error('Ошибка загрузки')
    users.value = await response.json()
  } catch (err) {
    error.value = err.message
  } finally {
    loading.value = false
  }
})
</script>

Что мы сделали:

• Создали реактивные переменные для данных, состояния загрузки и ошибки
• В хуке onMounted выполнили асинхронный запрос к API
• Обработали возможные ошибки
• Обновили состояние компонента после получения данных

Важные особенности жизненного цикла

Разница между onMounted и onUpdated

<script setup lang="ts">
import { ref, onMounted, onUpdated } from 'vue'

const count = ref(0)

onMounted(() => {
  console.log('Первоначальный рендер')
})

onUpdated(() => {
  console.log('Компонент обновился, новое значение count:', count.value)
})
</script>

<template>
  <button @click="count++">Увеличить: {{ count }}</button>
</template>

Очистка ресурсов в onUnmounted

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'

let intervalId: number

onMounted(() => {
  intervalId = setInterval(() => {
    console.log('Таймер работает')
  }, 1000)
})

onUnmounted(() => {
  clearInterval(intervalId)
  console.log('Таймер остановлен')
})
</script>

Ключевые выводы

1. Хуки жизненного цикла — мощный инструмент для управления поведением компонента:

   • onMounted — точка входа для загрузки данных и side-эффектов
   • onUpdated — отслеживание изменений в компоненте
   • onUnmounted — критически важен для очистки ресурсов

2. Практическое применение

   • 90% случаев использования onMounted — для работы с API
   • Все асинхронные операции требуют обработки состояний загрузки и ошибок
   • TypeScript значительно повышает надежность кода

3. Производительность:

   • Всегда останавливайте таймеры/подписки в onUnmounted
   • Избегайте сложной логики в onUpdated — это может привести к циклам рендеринга

Домашнее задание

1. Загрузка постов

   • Создайте компонент, который:
     • Загружает посты с API https://jsonplaceholder.typicode.com/posts
     • Показывает индикатор загрузки
     • Обрабатывает ошибки
     • Имеет кнопку для повторной загрузки

2. Таймер обратного отсчета

   • Реализуйте компонент таймера, который:
     • Начинает отсчет с 10 секунд
     • Останавливается при достижении 0
     • Очищает таймер при размонтировании компонента