Vue interview

Train

Watchers and the lifecycle

watch versus watchEffect, deep watching and getters, race conditions with onWatcherCleanup, flush timing, the component lifecycle and what Vue cleans up, and what happens between a state change and the screen.
WatchersLifecycle hooks

From your Rendering, Watchers note and the watcher and lifecycle parts of Important.

Know

  • watch: explicit source (ref, reactive object, getter, array), lazy, gets new and old value; immediate, deep, once. A reactive object source is deep; a getter is compared by value, so nested changes need deep: true.
  • watchEffect: runs immediately, tracks what it reads; with async code only reads before the first await count.
  • Cleanup: onWatcherCleanup() (3.5) or the onCleanup argument runs before the next run and on stop; abort the previous request there; register it before any await.
  • Flush: pre (default, batched, before render), post (after the DOM update, watchPostEffect), sync (on every change).
  • Lifecycle: setup, onBeforeMount, render, children, onMounted (children first); onBeforeUpdate/onUpdated; onBeforeUnmount/onUnmounted. Vue cleans up its own watchers, computeds and template listeners, not timers, window/document listeners, observers or third-party instances.
  • Update cycle: setter, dirty computeds, sync watchers, update job queued; microtask: pre watchers, onBeforeUpdate, render and patch, post watchers, onUpdated; nextTick resolves after.

Fact check of your notes

Gotcha· The callback gets the new value first

watch(myRefToWatch, async (oldVal, newVal) => …): the order is (newValue, oldValue, onCleanup).

Gotcha· Default watchers are batched, not run in the call stack

"Watchers behave like a change to a reactive value - they are called in the call stack": only flush: 'sync' watchers run synchronously. Default pre watchers are queued and run once, before the next render, with the latest value; your note says this correctly further down.

Exercise

Exercise
  • Build a search box whose watcher fetches results; slow the API down in DevTools, type quickly and watch an old response win; fix it with onWatcherCleanup and an AbortController.
  • Log every lifecycle hook of a parent and a child, plus a pre, a post and a sync watcher, then change state three times in a loop and explain the order.

Be able to say

Be able to say· watch or watchEffect?

"watch when I care about one specific source and maybe its old value, and want the effect only when it changes, like refetching when an id changes. watchEffect when the effect reads several values and should run right away with the current state. Either way, if the effect is async, I cancel the previous run in a cleanup so an old response can't win."

Be able to say· What does Vue clean up when a component unmounts?

"Everything it created: watchers and computeds from setup, template listeners, child components. Not what I started myself: intervals and timeouts, listeners on window or document, observers, sockets, chart or map instances. Those I stop in onUnmounted, or use helpers that do it, otherwise they keep running and keep the component in memory."

Your notes

Open in Notes

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

Reactivity

How Vue tracks dependencies with track and trigger, ref versus reactive, why destructuring a reactive object breaks it, computed and its lazy cache, shallowRef, nextTick and DOM update timing, and a writable computed.

Templates and rendering

v-if versus v-show, why v-for needs a stable key, v-if and v-for on the same element, and template refs with defineExpose.