1---
2title: Register Lifecycle Hooks Synchronously During Setup
3impact: HIGH
4impactDescription: Asynchronously registered lifecycle hooks will never execute
5type: capability
6tags: [vue3, composition-api, lifecycle, onMounted, onUnmounted, async, setup]
7---
8 
9# Register Lifecycle Hooks Synchronously During Setup
10 
11**Impact: HIGH** - Lifecycle hooks registered asynchronously (e.g., inside setTimeout, after await) will never be called because Vue cannot associate them with the component instance. This leads to silent failures where expected initialization or cleanup code never runs.
12 
13In Vue 3's Composition API, lifecycle hooks like `onMounted`, `onUnmounted`, `onUpdated`, etc. must be registered synchronously during component setup. The hook registration doesn't need to be lexically inside `setup()` or `<script setup>`, but the call stack must be synchronous and originate from within setup.
14 
15## Task Checklist
16 
17- [ ] Register all lifecycle hooks at the top level of setup() or `<script setup>`
18- [ ] Never register hooks inside setTimeout, setInterval, or Promise callbacks
19- [ ] When calling composables that use lifecycle hooks, call them synchronously
20- [ ] Hooks CAN be in external functions if called synchronously from setup
21 
22**Incorrect:**
23```javascript
24// WRONG: Hook registered asynchronously - will NEVER execute
25import { onMounted } from 'vue'
26 
27export default {
28  async setup() {
29    // After await, we're in a different call stack
30    const data = await fetchInitialData()
31 
32    // This hook will NOT be registered!
33    onMounted(() => {
34      console.log('This will never run')
35    })
36  }
37}
38```
39 
40```javascript
41// WRONG: Hook registered in setTimeout - will NEVER execute
42import { onMounted } from 'vue'
43 
44export default {
45  setup() {
46    setTimeout(() => {
47      // This is asynchronous - hook won't be registered!
48      onMounted(() => {
49        initializeChart()
50      })
51    }, 100)
52  }
53}
54```
55 
56```javascript
57// WRONG: Hook registered in Promise callback
58import { onMounted } from 'vue'
59 
60export default {
61  setup() {
62    fetchConfig().then(() => {
63      // Asynchronous! This will silently fail
64      onMounted(() => {
65        applyConfig()
66      })
67    })
68  }
69}
70```
71 
72**Correct:**
73```javascript
74// CORRECT: Hook registered synchronously at top level
75import { onMounted, ref } from 'vue'
76 
77export default {
78  setup() {
79    const data = ref(null)
80 
81    // Register hook synchronously FIRST
82    onMounted(async () => {
83      // Async operations are fine INSIDE the hook
84      data.value = await fetchInitialData()
85      initializeChart()
86    })
87 
88    return { data }
89  }
90}
91```
92 
93```vue
94<!-- CORRECT: <script setup> - hooks at top level -->
95<script setup>
96import { onMounted, onUnmounted, ref } from 'vue'
97 
98const isReady = ref(false)
99 
100// These are synchronous during script setup execution
101onMounted(() => {
102  isReady.value = true
103})
104 
105onUnmounted(() => {
106  cleanup()
107})
108</script>
109```
110 
111```javascript
112// CORRECT: Hook in external function called synchronously from setup
113import { onMounted, onUnmounted } from 'vue'
114 
115function useWindowResize(callback) {
116  // This is fine - it's called synchronously from setup
117  onMounted(() => {
118    window.addEventListener('resize', callback)
119  })
120 
121  onUnmounted(() => {
122    window.removeEventListener('resize', callback)
123  })
124}
125 
126export default {
127  setup() {
128    // Composable called synchronously - hooks will be registered
129    useWindowResize(handleResize)
130  }
131}
132```
133 
134## Multiple Hooks Are Allowed
135 
136```javascript
137// CORRECT: You can register the same hook multiple times
138import { onMounted } from 'vue'
139 
140export default {
141  setup() {
142    // Both will run, in order of registration
143    onMounted(() => {
144      initializeA()
145    })
146 
147    onMounted(() => {
148      initializeB()
149    })
150  }
151}
152```
153 
154## Reference
155- [Vue.js Lifecycle Hooks](https://vuejs.org/guide/essentials/lifecycle.html)
156- [Composition API Lifecycle Hooks](https://vuejs.org/api/composition-api-lifecycle.html)
157