Module Recap

Module 03 covered Vue’s reactive system in depth: the why behind reactivity, ref and reactive, computed, watch/watchEffect, and lifecycle hooks. These APIs are the engine of every Vue component.

What you learned

Reactivity means automatic UI updates. Vue tracks which templates and computed values depend on which reactive state. When state changes, only the dependents re-render. Plain let/const variables don’t trigger anything.

ref and reactive create reactive state. ref works for any value type and requires .value in script; reactive works for objects and is accessed directly. Prefer ref — it avoids destructuring pitfalls and works uniformly.

computed derives cached values. The getter only re-runs when a dependency changes. Multiple template usages of the same computed return the cached result — no redundant computation. Use computed for derivations, methods for actions.

watch and watchEffect run side effects. watch observes a specific source and provides old and new values. watchEffect tracks all reactive reads automatically and runs immediately. Use watch for precise control; use watchEffect for fire-and-forget synchronization.

Lifecycle hooks run at specific moments. onMounted is the right place for DOM-dependent setup. onUnmounted is the right place for cleanup. Most side effects belong in watch/watchEffect rather than lifecycle hooks.

How this connects to FamilyTree

FamilyTree’s familyStore.ts uses everything from this module:

// ref for all state
const people = ref<Person[]>([])
const focusPersonId = ref<string | null>(null)

// computed for all derivations — never stored, always derived
const focusPerson = computed(() =>
  people.value.find(p => p.id === focusPersonId.value)
)
const parents = computed(() =>
  focusPerson.value
    ? people.value.filter(p => focusPerson.value!.parentIds.includes(p.id))
    : []
)
const currentSpouse = computed(() =>
  (focusPerson.value?.spouses ?? []).find(s => !s.divorceDate)
    ? people.value.find(p => p.id === /* ... */)
    : undefined
)

No lifecycle hooks are needed in the store — Pinia handles initialization. The PersonDetailView uses local ref for form state, and components auto-clean watchers on unmount.

Key terms

Term	What it means
ref(value)	Reactive reference — access with .value in script
reactive(object)	Deeply reactive object — direct property access
computed(() => expr)	Cached derived value — re-computes when dependencies change
watch(source, cb)	Side effect on a specific source — provides new and old value
watchEffect(cb)	Side effect tracking all reads — runs immediately
onMounted(cb)	Runs after DOM insertion — safe to access DOM
onUnmounted(cb)	Runs before destruction — clean up timers/listeners
Template ref	ref="name" — a reference to a real DOM element

What is next

Module 04 — Directives and Templates →

Module 04 covers Vue’s template directives in depth: v-bind, v-on, v-if/v-show, v-for, v-model, and class/style bindings. These are the HTML superpowers that power FamilyTree’s focus view lists, conditional relationship sections, and forms.