Жизненный цикл компонентов

Инициализация компонента

Каждый компонент в Quasar, как и в Vue.js (на котором он основан), проходит через строгую последовательность этапов жизненного цикла. Первый этап — инициализация, на котором создается экземпляр компонента. В этот момент происходит:

  • Разбор props и установка их значений.
  • Создание реактивных данных, определенных в data.
  • Инициализация вычисляемых свойств (computed) и наблюдателей (watch).
  • Подготовка методов и событий компонента.

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

Монтирование компонента

Следующий этап — монтирование, когда компонент привязывается к DOM. Основные хуки, вызываемые в этой фазе:

  • beforeMount: вызывается перед добавлением DOM элемента компонента в документ. На этом этапе можно выполнять подготовительные действия, которые не зависят от DOM.
  • mounted: вызывается сразу после того, как DOM элемент компонента вставлен в документ. Здесь уже безопасно использовать ref для доступа к элементам, инициализировать сторонние библиотеки или производить анимации.

Пример использования:

export default {
  data() {
    return {
      message: "Привет, Quasar!"
    }
  },
  mounted() {
    console.log(this.$refs.myButton) // доступ к DOM-элементу
  }
}

Обновление компонента

Компонент может изменять свое состояние в течение жизни. Основные события обновления:

  • beforeUpdate: вызывается перед тем, как виртуальный DOM будет пересчитан и обновлен. Используется для подготовки данных перед перерисовкой.
  • updated: вызывается после того, как компонент был обновлен и изменения отражены в DOM. Здесь безопасно измерять элементы или выполнять пост-рендеринговые действия.

Пример:

watch: {
  message(newVal, oldVal) {
    console.log(`Сообщение изменилось с ${oldVal} на ${newVal}`)
  }
}

Размонтирование компонента

Когда компонент удаляется из DOM, запускается этап размонтирования. Основные хуки:

  • beforeUnmount: вызывается перед удалением DOM. Можно отписывать обработчики событий или останавливать таймеры.
  • unmounted: вызывается после того, как DOM элемент удален. Это финальная точка жизненного цикла, когда можно освобождать ресурсы.

Пример:

export default {
  beforeUnmount() {
    clearInterval(this.timer)
  }
}

Специфика Quasar и его плагинов

Quasar добавляет специфические возможности к стандартному жизненному циклу Vue:

  • Компоненты UI, такие как QDialog или QDrawer, могут быть динамически созданы через this.$q.dialog или this.$q.drawer. В таких случаях жизненный цикл управляется не только Vue, но и внутренним API Quasar.
  • Плагины Quasar, например Notify или Loading, не имеют традиционного DOM-жизненного цикла, но используют аналогичные события для управления состоянием: открытие, обновление, закрытие.
  • Компоненты, созданные через v-if или динамическое рендеринг через v-for, могут монтироваться и размонтироваться многократно, что требует внимательного управления ресурсами и слушателями событий.

Асинхронные операции и жизненный цикл

Часто компоненты Quasar взаимодействуют с асинхронными API (HTTP-запросы, таймеры). Следует учитывать:

  • Асинхронные операции должны корректно завершаться при размонтировании компонента, чтобы избежать утечек памяти.
  • Использование onMounted вместе с async/await позволяет безопасно инициализировать данные после монтирования DOM:
async mounted() {
  this.items = await fetchItems()
}

Комбинированные подходы

В Quasar часто используются миксины, композиция API и сигналы реактивности, чтобы управлять жизненным циклом компонентов более гибко. Например:

import { ref, onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    const count = ref(0)
    let timer

    onMounted(() => {
      timer = setInterval(() => count.value++, 1000)
    })

    onUnmounted(() => {
      clearInterval(timer)
    })

    return { count }
  }
}

Такой подход позволяет полностью контролировать все стадии жизни компонента, минимизируя побочные эффекты и обеспечивая чистое управление ресурсами.

Практические рекомендации

  • Использовать mounted для доступа к DOM и инициализации сторонних библиотек.
  • Размонтирование — момент для очистки таймеров, отписки от событий и освобождения памяти.
  • Для асинхронных операций применять защиту от размонтирования (например, флаги isMounted).
  • Динамически создаваемые компоненты Quasar требуют учета внутренних хуков API Quasar.

Жизненный цикл компонентов Quasar — это не просто последовательность хуков, а мощный инструмент управления состоянием, ресурсами и поведением интерфейса, который позволяет создавать стабильные и масштабируемые приложения.

Оглавление