Master programming syntax, solve interactive challenges & run live code in Syntaxis Explore Arena →
menu_book Course Curriculum (Vue 3) expand_more
SFC & Templates
Single-file components Template interpolation v-bind v-on v-if v-show v-for and keys Dynamic components
Reactivity
ref reactive computed watch watchEffect toRef toRefs shallowRef
Components
Props Prop validation Emits Slots Named slots Scoped slots provide and inject Template refs
Forms & DOM
v-model v-model modifiers Multiple v-model bindings Class binding Style binding Event modifiers Key modifiers Custom directives
Async & Routing Patterns
Async components Suspense Teleport KeepAlive Transition TransitionGroup Composables Lifecycle hooks
Production Patterns
Pinia-style store pattern Readonly state Effect scope Error captured hook Performance computed caching Lazy route concept SSR hydration concept Testing component contract
Vue 3 / Async & Routing Patterns

Lifecycle hooks

Learn Lifecycle hooks in Vue 3 with a dedicated explanation, a concept-specific example, a production caution, and a mastery check.

12 min read • Advanced
vue-3-040.vue
vue 
<script setup>
import { onMounted,onUnmounted } from "vue"; const onResize=()=>console.log(innerWidth); onMounted(()=>addEventListener("resize",onResize)); onUnmounted(()=>removeEventListener("resize",onResize))
</script>
What to watch
Content source & attribution
Original Syntaxis Content · Original Syntaxis Content

Lesson quizzes

Lifecycle hooks Mastery Check →
← PREVIOUS
Composables
NEXT →
Pinia-style store pattern