From my notes

Train

Built-in components

Questions and flashcards from your notes on Vue's built-in components — what triggers a Transition and its classes, the move class of TransitionGroup, how KeepAlive caches instances and DOM, its hooks, max and include, Teleport's logical versus DOM hierarchy and deferred targets, and what Suspense waits for, with errors and Nuxt pages — with a fact check of the notes.
TransitionKeepAliveTeleportSuspense

Written from your built-in components note. The matching study page is Built-in components.

Know

  • Transition and TransitionGroup: which changes animate, the six classes, the move class for items that shift.
  • KeepAlive: the cached instance keeps its DOM, onActivated on first mount, least-recently-used eviction with max, include by name.
  • Teleport: props and injections stay, native events bubble from the new location, defer for targets rendered by Vue.
  • Suspense: what triggers the fallback, error handling through the parent, and why Nuxt pages can await at the top level.

Fact check of your notes

Gotcha· Transitions run on enter and leave, not on re-render

"Applied on re-render, or v-show" should read: v-if, v-show, switching a dynamic component, or changing the child's key. A re-render that patches the element in place does not trigger it.

Gotcha· KeepAlive keeps the DOM

The note says the DOM element is destroyed and the data kept. The whole instance is cached with its DOM, which is moved into a detached container and inserted back on activation; nothing re-renders.

Gotcha· max evicts the least recently used instance

"The last used instance is unmounted" should be the least recently used one.

Gotcha· include takes names, not bindings

<KeepAlive :include="MyComponent"> binds a variable; include="MyComponent" is the static name that matches the component's name, which <script setup> components infer from the file name.

Gotcha· defineAsyncComponent, not useAsyncComponent

Suspense waits for components created with defineAsyncComponent() and for components with async setup.

Exercise

Exercise
  • Add a .list-move transition to a TransitionGroup, remove items, and compare with and without position: absolute on leaving items.
  • Put three tabs in <KeepAlive :max="2">, log onActivated, onDeactivated and onUnmounted, and confirm which tab is evicted.
  • Teleport a modal to body and check that a native click listener on the original parent no longer fires.

Be able to say

Be able to say· What does KeepAlive do, and what are its hooks?

"It caches component instances that are switched away from, with their state and DOM, instead of unmounting them, so switching back is instant and nothing resets. A cached component gets onActivated when shown, including the first mount, and onDeactivated when hidden; when it is finally evicted by max, which removes the least recently used one, or when the KeepAlive itself unmounts, it gets onDeactivated and onUnmounted. include and exclude match component names."

Be able to say· What is Teleport for, and what does it not change?

"It renders part of a component's template somewhere else in the DOM, typically body, so modals, toasts and tooltips escape overflow: hidden and stacking contexts. It changes only the DOM position: props, provide/inject and emitted events work as if it were in place. Native DOM events bubble through the new location, and the target must exist when the Teleport mounts, or I use defer."

Your notes

Open in Notes

Nothing yet. Notes filed here show up on this page and the section overview.

Reusability

Questions and flashcards from your notes on the Vue docs' Reusability chapter — composables with shared and per-caller state, conventions, toValue and MaybeRefOrGetter inputs, lifecycle hooks in composables, custom directives and their bindings, global directives, plugins and a small i18n plugin — with a fact check of the notes.

Scaling up

Questions and flashcards from your notes on the Vue docs' Scaling Up chapter — why single-file components need compiling, how Vite's dev server works, code splitting, Vite 8 and Rolldown, Vue Router links, views, guards and reused instances, NuxtLink prefetching, global state on a server, test types, SSG versus SSR, and hydration mismatches from fetching and invalid HTML — with a fact check of the notes.