Hack Frontend Community

Vue-компоненты и их жизненные циклы

Что такое Vue-компоненты?

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

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

Каждый Vue-компонент проходит через определённые стадии от создания до удаления. Эти стадии называются жизненным циклом компонента. Vue предоставляет хуки жизненного цикла, которые позволяют выполнять код на разных этапах жизни компонента.

Важно:

Каждый из этих этапов будет рассмотрен отдельно в следующих разделах, где мы разберём их детально с примерами кода.

Жизненный цикл Vue-компонентов (Options API

1

Создание (Creation)

  • beforeCreate – вызывается перед инициализацией состояния.
  • created – вызывается после инициализации, но до рендера.
2

Монтаж (Mounting)

  • beforeMount – вызывается перед монтированием компонента в DOM.
  • mounted – вызывается после того, как компонент добавлен в DOM.
3

Обновление (Updating)

  • beforeUpdate – вызывается перед обновлением компонента.
  • updated – вызывается после обновления DOM.
4

Размонтирование (Unmounting)

  • beforeUnmount – вызывается перед удалением компонента из DOM.
  • unmounted – вызывается после удаления компонента.

Жизненный цикл Vue-компонентов (Composition API)

Note:

В Vue 3, вместо Options API, часто используется Composition API, который предоставляет специальные хуки для управления жизненным циклом компонента.

Основные хуки жизненного цикла в Composition API:

1

Создание (Creation)

  • setup() – выполняется перед монтированием, используется для инициализации состояния компонента.
2

Монтаж (Mounting)

  • onMounted(() => { ... }) – вызывается после монтирования компонента в DOM.
3

Обновление (Updating)

  • onBeforeUpdate(() => { ... }) – вызывается перед обновлением DOM.
  • onUpdated(() => { ... }) – вызывается после обновления DOM.
4

Размонтирование (Unmounting)

  • onBeforeUnmount(() => { ... }) – вызывается перед удалением компонента.
  • onUnmounted(() => { ... }) – вызывается после удаления компонента.

Итог

Жизненный цикл компонентов в Vue помогает управлять их состоянием, выполнять асинхронные операции и оптимизировать работу приложения.

В Vue 3 можно использовать как Options API, так и Composition API, в зависимости от потребностей проекта. Понимание этих стадий позволит вам писать более эффективный и чистый код.

  • Если вам нужен классический, интуитивно понятный подход — используйте Options API.

  • Если же требуется гибкость и возможность переиспользовать логику — Composition API будет лучшим выбором.

В любом случае, знание обоих подходов значительно расширит ваши возможности в разработке на Vue!