Category: Vue

BeforeUnmount (or its modern Composition API name onBeforeUnmount) This hook is the last moment Vue gives you to clean up everything that your component created or subscribed to before it gets completely destroyed and...

Unmounted (or its modern Composition API name onUnmounted) This hook is the final goodbye. When unmounted / onUnmounted runs: The component has already been removed from the DOM The virtual DOM node no longer...

ErrorCaptured lifecycle hook This hook is not like mounted or onBeforeUnmount that you use every day. It is a special emergency hook — the only built-in mechanism Vue gives you to catch JavaScript errors...

RenderTracked This is not a hook you will use every day — or even every month. Most Vue developers never touch it in production code. But once you understand what it does, you will...

RenderTriggered (its modern Composition API name is onRenderTriggered) Together with its sibling renderTracked / onRenderTracked, these two hooks form the deepest window into Vue’s reactivity system that you can get without writing your own...

Activated (and its sibling deactivated) These two hooks exist only when a component is wrapped in <KeepAlive>. They have nothing to do with the normal lifecycle of a component that is simply shown/hidden with...

Deactivated (and its modern Composition API name onDeactivated) This hook has nothing to do with the normal lifecycle of a component that is simply shown/hidden with v-if / v-show. It exists exclusively when a...

ServerPrefetch (or its modern Composition API name onServerPrefetch) This hook is not part of the normal client-side lifecycle (mounted, updated, unmounted etc.). It exists exclusively for server-side rendering scenarios — most commonly when you...

Vue Examples — 7 real-world, copy-paste-ready components that use almost everything we’ve covered so far (props, emits, slots, v-model, v-for, v-if/v-show, computed, watch, lifecycle, expose, KeepAlive, Transition, Teleport, Suspense…) Each example is small enough...

Vue-exercises, and let’s do what real teachers should do after theory: Hands-on exercises — the only way you actually learn Vue. I’m not going to give you 50 tiny “print hello world” tasks. Instead,...