Hack Frontend Community

Vue Components and Their Lifecycles

What are Vue Components?

Vue components are reusable interface parts that allow breaking application into independent blocks. They help structure code and simplify development of complex applications.

Vue Component Lifecycle

Each Vue component goes through certain stages from creation to removal. These stages are called component lifecycle. Vue provides lifecycle hooks that allow executing code at different stages of component life.

Important:

Each of these stages will be covered separately in following sections, where we'll analyze them in detail with code examples.

Vue Component Lifecycle (Options API)

1

Creation

  • beforeCreate – called before state initialization.
  • created – called after initialization, but before render.
2

Mounting

  • beforeMount – called before component mounting to DOM.
  • mounted – called after component is added to DOM.
3

Updating

  • beforeUpdate – called before component update.
  • updated – called after DOM update.
4

Unmounting

  • beforeUnmount – called before component removal from DOM.
  • unmounted – called after component removal.

Vue Component Lifecycle (Composition API)

Note:

In Vue 3, instead of Options API, Composition API is often used, which provides special hooks for managing component lifecycle.

Main Lifecycle Hooks in Composition API:

1

Creation

  • setup() – executes before mounting, used for component state initialization.
2

Mounting

  • onMounted(() => { ... }) – called after component mounting to DOM.
3

Updating

  • onBeforeUpdate(() => { ... }) – called before DOM update.
  • onUpdated(() => { ... }) – called after DOM update.
4

Unmounting

  • onBeforeUnmount(() => { ... }) – called before component removal.
  • onUnmounted(() => { ... }) – called after component removal.

Summary

Component lifecycle in Vue helps manage their state, perform asynchronous operations and optimize application work.

In Vue 3 you can use both Options API and Composition API, depending on project needs. Understanding these stages will allow you to write more efficient and clean code.

  • If you need classic, intuitive approach — use Options API.

  • If you need flexibility and ability to reuse logic — Composition API will be better choice.

In any case, knowing both approaches will significantly expand your capabilities in Vue development!