Chapter 95: Vue ‘beforeCreate’ Lifecycle Hook
BeforeCreate
This is the very first lifecycle hook that Vue calls when it starts creating a component instance — and in modern Vue 3 + <script setup> code (2026 standard), almost nobody uses it anymore.
But you still need to understand it properly because:
- Many job interviews (especially in India) still ask about the full lifecycle, including beforeCreate
- You will see it in legacy Vue 2 / early Vue 3 code
- Some old tutorials, books, and Stack Overflow answers still show it
- Vue Devtools still lists it in the lifecycle tab (even though it runs before <script setup>)
So let’s go through it step by step — like I’m sitting next to you explaining when it runs, what is ready / not ready, and why 99% of developers never touch it.
1. Where beforeCreate sits in the lifecycle (full timeline)
Here is the exact order of Vue 3 lifecycle hooks (Options API names + Composition API equivalents):
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
beforeCreate() ── ① (this one) created() ── ② beforeMount() ── ③ mounted() ── ④ ← most useful beforeUpdate() ── ⑤ updated() ── ⑥ beforeUnmount() ── ⑦ unmounted() ── ⑧ |
beforeCreate is literally the first moment Vue creates the component instance.
2. What is available / NOT available in beforeCreate?
This is the key table you should memorize — it explains why almost nobody uses this hook.
| Feature / Access | Available in beforeCreate? | Reason / Explanation |
|---|---|---|
| this | Yes | The component instance already exists (empty shell) |
| data() / ref() / reactive() | No | data() has not been called yet — no reactive state |
| props | No | Props have not been resolved / injected yet |
| computed | No | Computed properties have not been created |
| methods | No | Methods have not been attached yet |
| Template / render function | No | Template has not been compiled yet |
| DOM / $el / $refs | No | No DOM rendering has happened at all |
| this.$emit | No | Event system not ready |
| this.$parent / $root | No (or unreliable) | Parent/child relationship not fully established |
| Injected values (provide/inject) | No | Injection happens later |
Summary sentence to remember forever:
In beforeCreate, almost nothing useful is ready yet — only the empty component instance shell exists.
3. Real Example – Seeing What Is / Isn’t Available
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<template> <div> <h2>beforeCreate Demo</h2> <p>Check console logs to see what is ready at each stage</p> </div> </template> <script> // Options API version (you still see this in legacy code / interviews) export default { name: 'BeforeCreateDemo', // ① beforeCreate – the earliest hook beforeCreate() { console.group('beforeCreate') console.log('this:', this) // exists (empty instance) console.log('this.$data:', this.$data) // undefined console.log('this.count:', this.count) // undefined console.log('this.user:', this.user) // undefined console.log('this.$props:', this.$props) // undefined console.log('this.$el:', this.$el) // undefined console.log('this.$refs:', this.$refs) // undefined console.log('this.$emit:', this.$emit) // undefined console.groupEnd() }, // ② created – now data & props are ready created() { console.group('created') console.log('this.count:', this.count) // 0 console.log('this.user:', this.user) // { name: 'Guest' } console.log('this.$props:', this.$props) // { initialCount: 0 } console.groupEnd() }, // ③ mounted – DOM is ready mounted() { console.log('mounted – DOM is ready, refs exist') }, data() { return { count: 0, user: { name: 'Guest' } } }, props: { initialCount: { type: Number, default: 0 } } } </script> |
Console output when component mounts:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
beforeCreate this: Proxy { … } (empty instance) this.$data: undefined this.count: undefined this.$props: undefined this.$el: undefined created this.count: 0 this.user: { name: 'Guest' } this.$props: { initialCount: 0 } |
→ You see clearly: beforeCreate has almost nothing.
4. Modern Vue 3 – Why We Almost Never Use beforeCreate
In <script setup> there is no beforeCreate hook at all.
The code inside <script setup> runs before the component instance is fully created — even earlier than beforeCreate.
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script setup> console.log('Top level of <script setup> – runs BEFORE beforeCreate') import { ref, onBeforeMount } from 'vue' const count = ref(0) onBeforeMount(() => { console.log('onBeforeMount – closest modern equivalent') }) </script> |
→ In modern code → you almost never need anything before onBeforeMount → onBeforeMount is the earliest hook you normally use
5. Very Rare Cases Where beforeCreate Is Still Used (2026)
You will see beforeCreate in these situations (legacy code):
- Very early initialization of non-reactive things (rare)
- Setting up global mixins / plugins that need to run before data/props
- Old code that wants to access this before anything else is ready
- Debugging / logging the very first moment of component creation
Realistic 2026 answer in interviews:
“In modern Vue 3 with <script setup>, we almost never use beforeCreate — it runs before data, props, computed, methods are ready. We use onBeforeMount or just top-level code in <script setup> instead. beforeCreate is mostly seen in legacy Options API code.”
Quick Summary Table – beforeCreate in 2026
| Question | Answer / Reality in 2026 |
|---|---|
| When does it run? | First hook – component instance created, nothing else ready |
| Is data/props/computed available? | No |
| Is DOM / $el / refs available? | No |
| Is this available? | Yes (empty instance) |
| Do modern developers use it? | Almost never |
| Modern replacement | Top-level <script setup> code or onBeforeMount |
| Still asked in interviews? | Yes — to check if you understand full lifecycle |
Final 2026 Advice
- In new code → never write beforeCreate — use top-level code in <script setup> or onBeforeMount
- When you see beforeCreate → it means Options API (legacy style)
- Learn to read it — many jobs, open-source projects, old tutorials still use it
- Never teach beginners beforeCreate as useful — it’s mostly trivia now
- If you ever feel like you need beforeCreate → 99% chance you’re doing something wrong (ask why you need code before data/props are ready)
Your mini homework:
- Create a component with beforeCreate, created, mounted logging
- Add console.log(this.count) in each → see when it becomes available
- Convert to <script setup> → see how much simpler it is (no hooks needed for most init)
Any part confusing? Want to see:
- Full lifecycle log comparison (Options vs Composition)?
- Real legacy code using beforeCreate → how to refactor it?
- beforeCreate vs top-level <script setup> code?
- When beforeCreate was actually useful (Vue 1 / very old patterns)?
Just tell me — we’ll trace the lifecycle and refactor together step by step 🚀
