How do hooks differ in the Options API and Composition API?
1. The main difference - where and how they are used
Options API - hooks are object methods
export default {
mounted() {
console.log('Component mounted')
}
}Composition API - hooks are imported functions
import { onMounted } from 'vue'
onMounted(() => {
console.log('Component mounted')
})2. The difference in context (this)
Options API
Hooks are called inside the object ->
this is available inside them:
mounted() {
console.log(this.user) // works
}Composition API
There is no this context - everything is explicit:
const user = ref('Tim')
onMounted(() => {
console.log(user.value) // works
})Composition API removes the confusion around this.
3. The difference in code organization
Options API
Logic is spread across the object's sections:
datamethodscomputedmountedwatch- ...
If the logic consists of several parts, it gets split up and scattered across the file.
Composition API
Logic is grouped by meaning:
const isOpen = ref(false)
function toggle() {
isOpen.value = !isOpen.value
}
onMounted(() => {
syncWithServer()
})Logic that belongs together sits next to each other -> the code is cleaner and easier to maintain.
4. The lifecycle is the same, but the hook names differ
Options API:
- mounted
- updated
- unmounted
- ...
Composition API:
- onMounted
- onUpdated
- onUnmounted
- ...
The meaning is 1 to 1, only the names differ.
5. In the Composition API, hooks can be called from composables
This is the main advantage of Vue 3.
You can extract the logic into a function:
export function useFetch(url) {
const data = ref(null)
onMounted(async () => {
data.value = await fetch(url).then(r => r.json())
})
return { data }
}And use it in any component:
const { data } = useFetch('/api/users')You cannot do this in the Options API - hooks are strictly tied to the component.
6. The Options API has 2 unique hooks
(that do not exist in the Composition API)
- beforeCreate
- created
Why don't they exist in the Composition API?
Because setup() itself is the created phase.
7. In <script setup> all hooks automatically belong to the component
No manual setup(), just:
<script setup>
onMounted(() => {})
onUnmounted(() => {})
</script>Vue itself understands that the hooks belong to the current component.
Comparison table
| Characteristic | Options API | Composition API |
|---|---|---|
| How they are called | as methods | as functions |
Use this | yes | no |
| Logic grouping | by type (data/methods/...) | by meaning |
| Extracting logic (composables) | limited | fully |
| Unique hooks | beforeCreate, created | none, replaced by setup() |
| Suited for | small components | large projects, complex logic |
| Readability | easier for beginners | better in large projects |
Summary (cheat sheet)
Options API: hooks are object methods, this exists, logic is scattered.
Composition API: hooks are functions, there is no this, logic is grouped by meaning, hooks can be used inside composables.
Hooks do the same thing, but they look and are organized differently.
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.