Course Content
VUE Tutorial
About Lesson

beforeCreate, created

Vue.js, often referred to as Vue, is a progressive JavaScript framework used for building user interfaces. In this post, we’ll delve into two crucial lifecycle hooks: beforeCreate and created.

The Lifecycle of Vue Components

Lifecycle Hooks Overview

Before we dive into specifics, let’s understand Vue’s component lifecycle. It consists of various hooks, each serving a distinct purpose throughout the creation, mounting, updating, and destruction of a Vue instance.

The Prelude: beforeCreate

What is beforeCreate?

The beforeCreate hook is the earliest point in the lifecycle. At this stage, data observation, event/watcher setup, and initial render processes haven’t taken place.

Use Cases

  • Setting up Custom Properties: You can initialize properties before the reactive data observation begins.
  • Non-Reactive Setup: Actions performed here won’t trigger reactivity, making it suitable for tasks not relying on reactive data.

The Birth: created

Introduction to created

The created hook follows beforeCreate and is triggered once the Vue instance is created. At this point, the initial stage of the component’s lifecycle is complete.


  • Initialization Logic: Perform tasks requiring access to reactive data.
  • AJAX Requests: Ideal for fetching data asynchronously.

Best Practices

Leveraging the Power

  • Delineate Logic: Use beforeCreate for setup unrelated to component data. Reserve created for actions reliant on reactive data.
  • Async Operations: Asynchronous operations, such as AJAX requests, find a home in the created hook.

Potential Pitfalls

Watch Out!

  • Reactivity Issues: Manipulating data in beforeCreate won’t trigger reactivity, potentially leading to unexpected behaviors.
  • Scope Limitation: Variables declared in beforeCreate might not be accessible in subsequent hooks.