codejump
Academy

Vue

21 pages · about 116 min of reading

  1. 01Template Syntax: Interpolation and BindingsWhat {{ }} can and cannot render, why every dynamic attribute needs v-bind, and how :class and :style differ from a plain HTML string.
  2. 02Conditional Rendering and v-for Listsv-if versus v-show is a cost trade-off, not a style choice, and v-for needs a stable :key for the same reason React needs one on map().
  3. 03Event Handling: v-on and ModifiersPassing a handler versus calling it in the template is the same pitfall React has with onClick, and modifiers replace the boilerplate everyone hand-writes for it.
  4. 04Ref vs Reactive: Vue's State Primitivesref wraps any value behind a .value getter/setter; reactive proxies an object directly. The trade-offs explain why most Vue code reaches for ref by default.
  5. 05Computed Properties: Cached, Derived StateA computed only recalculates when a dependency it read actually changes — the caching a plain method call can never give you.
  6. 06Form Input Bindings: v-model in Depthv-model.trim, .number and .lazy fix the three most common form bugs, and a checkbox group binds to a shared array with no extra code.
  7. 07Watchers: watch() and watchEffect()watch() reacts to sources you name explicitly; watchEffect() auto-tracks whatever it reads — the same trade computed vs method makes, one level up.
  8. 08Template Refs: Reaching the Real DOMA template ref is null until onMounted — the component has to exist in the DOM before anything can point at it.
  9. 09Props & Component EventsProps flow down, events flow up — and the object syntax for both is what actually gives you defaults, validation and v-model.
  10. 10Slots: Passing Templates, Not Just ValuesA slot is a function a parent hands its child — calling it renders the parent's markup, and calling it with data makes that markup scoped.
  11. 11Provide / Inject: Skipping the Prop Chainprovide() and inject() pass data straight to any descendant, no matter how deep — but only stay reactive when what you provide is itself reactive.
  12. 12Fallthrough AttributesAn attribute a parent passes but the child never declares as a prop lands on the root element automatically — unless there is more than one root.
  13. 13Lifecycle HooksEvery lifecycle hook that sets something up has a matching one that tears it down — onMounted without onUnmounted is a leak waiting to happen.
  14. 14Custom DirectivesA directive is the same mounted/unmounted lifecycle a component has, applied to a raw DOM element instead of a component instance.
  15. 15Vue with TypeScript: Props & EmitsA discriminated union prop or a typed emits object only pays off once the component actually branches and matches on it.
  16. 16Vue with TypeScript: Generics & Type GuardsA generic <T> only constrains what a function accepts — a type guard is the one construct that actually checks a value's shape at runtime.
  17. 17Teleport & SuspenseTeleport moves a component's DOM without moving its logical position; Suspense gives an async component a fallback while it loads.
  18. 18Performance Patterns: KeepAlive & v-memoKeepAlive caches a component instance instead of destroying it; v-memo skips a re-render entirely when nothing it depends on changed.
  19. 19Compound ComponentsTabs, Tab and TabPanel coordinate through one shared provide/inject context — each part only has to talk to that context, never to its siblings.
  20. 20Composables: Reusable Stateful LogicA composable is a plain function using ref, computed and watch — Vue's answer to a custom React hook, without the rules-of-hooks constraints.
  21. 21Pinia: State Management for Vue AppsA Pinia store is a composable with a fixed shape — state, getters and actions — and understanding it as one demystifies most of what it does.