Chapter 96: Vue ‘created’ Lifecycle Hook
Created
This hook is the second step in the component lifecycle (right after beforeCreate), and in the old Options API it was one of the most commonly used hooks. In modern Vue 3 + <script setup> (2026 standard), almost nobody uses created anymore — but you still need to understand it very well because:
- You will read/maintain legacy Vue 2 / early Vue 3 code
- Many job interviews (especially in India) still ask about the full lifecycle, including created
- Older tutorials, books, Stack Overflow answers, and many plugins still show it
- Vue Devtools still lists it in the lifecycle tab
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 modern developers never touch it.
1. Where created sits in the full lifecycle (Vue 3 timeline)
Here is the exact order of lifecycle hooks:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
beforeCreate() ── ① (almost nothing ready) created() ── ② ← this one beforeMount() ── ③ mounted() ── ④ ← most useful in practice beforeUpdate() ── ⑤ updated() ── ⑥ beforeUnmount() ── ⑦ unmounted() ── ⑧ |
created is the moment when Vue has:
- Created the component instance
- Processed data(), props, computed, methods, watch, etc.
- But has not yet compiled the template or mounted anything to the DOM
2. What is available / NOT available in created?
This is the key table you should memorize — it explains why created was popular in Vue 2 but is rarely needed now.
| Feature / Access | Available in created()? | Reason / Explanation |
|---|---|---|
| this | Yes | Component instance exists and is fully populated |
| data() / ref() / reactive() | Yes | data() has already been called, state is reactive |
| props | Yes | Props have been resolved & injected |
| computed | Yes | Computed properties are created & cached |
| methods | Yes | All methods are attached to this |
| Template / render function | No | Template has not been compiled yet |
| DOM / $el / $refs | No | No rendering or mounting has happened — $el is still undefined |
| this.$emit | Yes | You can emit events (but parent might not be listening yet) |
| this.$parent / $root | Yes | Parent/child relationship is established |
| Injected values (provide/inject) | Yes | Injection has happened |
Summary sentence to remember forever:
In created, everything JavaScript-related is ready (data, props, computed, methods, watch), but nothing DOM-related exists yet — no $el, no refs, no rendered elements.
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 61 62 63 64 65 66 67 68 69 70 |
<template> <div> <h2>created Hook Demo</h2> <p>Check console logs to see what is ready at each stage</p> <p>Count: {{ count }}</p> <button @click="count++">+1</button> </div> </template> <script> // Options API version (you still see this in legacy code / interviews) export default { name: 'CreatedDemo', // ① beforeCreate – almost nothing beforeCreate() { console.group('beforeCreate') console.log('this.count:', this.count) // undefined console.log('this.$props:', this.$props) // undefined console.log('this.$el:', this.$el) // undefined console.groupEnd() }, // ② created – now data, props, computed, methods are ready created() { console.group('created') console.log('this.count:', this.count) // 0 console.log('this.user:', this.user) // { name: 'Guest' } console.log('this.fullName:', this.fullName) // 'Guest (age 0)' console.log('this.$props:', this.$props) // { initialCount: 0 } console.log('this.$el:', this.$el) // undefined ← no DOM yet! console.log('this.$refs:', this.$refs) // undefined console.groupEnd() // Classic use-case: set initial state based on props this.count = this.initialCount * 2 }, // ③ mounted – DOM is finally ready mounted() { console.log('mounted – now $el and refs exist') }, data() { return { count: 0, user: { name: 'Guest', age: 0 } } }, props: { initialCount: { type: Number, default: 0 } }, computed: { fullName() { return `${this.user.name} (age ${this.user.age})` } } } </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.count: undefined this.$props: undefined this.$el: undefined created this.count: 0 this.user: { name: 'Guest', age: 0 } this.fullName: 'Guest (age 0)' this.$props: { initialCount: 0 } this.$el: undefined ← still no DOM! |
→ You see clearly: created has reactive state, props, computed — but no DOM
4. Classic Use-Cases for created (What People Used to Do)
In Vue 2 / early Vue 3, developers used created for:
- Setting initial state based on props
- Fetching data that doesn’t depend on DOM
- Registering global event listeners (rare)
- Normalizing/transforming props into local data
Example (very common in legacy code)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
created() { // Normalize prop into local state this.localItems = this.items.map(item => ({ ...item, selected: false })) // Start polling or interval this.pollTimer = setInterval(this.fetchUpdates, 5000) }, beforeUnmount() { clearInterval(this.pollTimer) } |
5. Modern Vue 3 – Why We Almost Never Use created
In <script setup> there is no created hook at all.
The code inside <script setup> runs even earlier than beforeCreate — and that’s usually all you need for initialization.
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<script setup> import { ref, watch } from 'vue' const count = ref(0) const localItems = ref([]) // Top-level code runs before any lifecycle hook console.log('Top level <script setup> – runs before created') // If you need something after props are ready → use onBeforeMount import { onBeforeMount } from 'vue' onBeforeMount(() => { console.log('onBeforeMount – closest modern equivalent to created') }) </script> |
→ In modern code → you almost never need anything before onBeforeMount → onBeforeMount is the earliest hook you normally use
6. Very Rare Cases Where created Is Still Used (2026)
You will see created in these situations (legacy code):
- Old code that wants to normalize props into local data before anything else
- Legacy mixins or plugins that need to run very early
- Debugging / logging the moment when data & props become available
- Some old third-party libraries that hook into created
Realistic 2026 interview answer:
“In modern Vue 3 with <script setup>, we almost never use created — it runs after data & props are ready but before DOM mounting. Most initialization happens at the top level of <script setup> or in onBeforeMount / onMounted. created is mostly seen in legacy Options API code.”
Quick Summary Table – created in 2026
| Question | Answer / Reality in 2026 |
|---|---|
| When does it run? | After data/props/computed/methods are ready, before template compile / mount |
| Is data/props/computed available? | Yes |
| Is DOM / $el / refs available? | No |
| Is this available? | Yes (fully populated 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 created — use top-level code in <script setup> or onBeforeMount
- When you see created → it means Options API (legacy style)
- Learn to read it — many jobs, open-source projects, old tutorials still use it
- Never teach beginners created as useful — it’s mostly trivia now
- If you ever feel like you need created → 99% chance you’re doing something wrong (ask why you need code after props/data but before DOM)
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 created → how to refactor it?
- created vs top-level <script setup> code?
- When created was actually useful (Vue 1 / very old patterns)?
Just tell me — we’ll trace the lifecycle and refactor together step by step 🚀
