Suggest an edit

Improve this article

Refine the answer for “What is the `beforeCreate` hook used for?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

`beforeCreate` is the **first lifecycle hook** of a Vue component.
It is called **before anything else**, even before reactivity, props, computed properties, and methods are initialized.

In other words:

> `beforeCreate` **is the moment the component is just starting to be created, but it doesn't have access yet to either data or props.**

---

## What happens during beforeCreate?

At this stage:

- Vue **has not created the reactive data (**`data`**) yet**
- **props are not available yet**
- **methods are not bound to the instance yet**
- **computed and watch are not initialized yet**
- only the bare component instance is available

---

## What can and cannot be done in beforeCreate?

### What you CANNOT do:

The hook has no access to:

```js
this.dataProperty
this.someMethod()
this.someComputed
this.someProp
```

All of them will be `undefined`.

---

### What you can do:

#### 1. **Set up global variables**

For example, binding DI (dependency injection) in large applications.

#### 2. **Connect plugins that must run before everything else**

#### 3. **Debugging**

The hook is useful for analyzing the initialization process.

#### 4. **Modify the instance before Vue applies reactivity**

---

## Example of the behavior

```js
export default {
  data() {
    return { msg: "Hello" };
  },

beforeCreate() {
    console.log(this.msg);      // undefined
    console.log(this.$data);    // undefined
    console.log(this.$props);   // undefined
  },

created() {
    console.log(this.msg);      // "Hello"
  }
}
```

---

## When can `beforeCreate` actually be used?

In a real application it's rarely needed.
But there are cases:

#### 1. Initializing early dependencies

For example, libraries that must connect before reactivity is created.

#### 2. Internal plugins and mixins

Plugins need an "early entry point".

#### 3. Dependency injection (especially in Vue 2)

#### 4. Optimizations when creating a large number of small components

Markdown · drag & drop images · ⌘B / ⌘I shortcuts291 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.