Suggest an editImprove this articleRefine the answer for “What is watch needed for?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**`watch`** is needed to **track changes in reactive data** and to run **side effects** when that data changes. **Key point:** watch is a reaction to a value changing - when something changes, your code runs, unlike `computed`, which only calculates and caches a value but doesn't perform actions.Shown above the full answer for quick recall.Answer (EN)Image`watch` is needed to **track changes in reactive data** and to run **side effects** when that data changes. In other words: > **watch is a reaction to a value changing.** > **When something changes -> your code runs.** This is what sets it apart from `computed`, which *only calculates and caches* but *doesn't perform actions*. --- ## When to use watch? (the most important part for interviews) ### 1. **For side effects** Things you **cannot** do in `computed`, but need to do when a value changes: - API requests - writing to localStorage - logging - interacting with the DOM - calling third-party library functions **Example:** ```js watch(query, () => { fetchData(query.value) }) ``` A request is sent every time `query` changes. --- ### 2. **For tracking changes to a form or object** ```js watch(form, (newVal) => { saveDraft(newVal) }, { deep: true }) ``` --- ### 3. **For reacting to a route change** ```js watch(() => route.params.id, (id) => loadUser(id)) ``` --- ### 4. **For running logic when props change** ```js watch(() => props.item, (newVal) => { console.log("prop changed:", newVal) }) ``` --- ### 5. **For running logic immediately + on change (with immediate)** ```js watch(userId, loadUser, { immediate: true }) ``` --- ## A simple watch example ```js const count = ref(0) watch(count, (newValue, oldValue) => { console.log(`count: ${oldValue} → ${newValue}`) }) ``` Fires on every change to `count`. --- ## watch options #### `deep: true` - track nested properties ```js watch(settings, handler, { deep: true }) ``` #### `immediate: true` - run the effect immediately ```js watch(id, load, { immediate: true }) ``` #### watching several values ```js watch([a, b], ([newA, newB]) => {}) ``` --- ## watch vs computed (a common question!) | watch | computed | |---|---| | performs *actions* | returns a value | | not cached | cached | | good for API calls and side effects | good for derived values | | can be async | sync only (getter) | | tracks both objects and functions | works only on the dependencies used in the getter | **Summary:** - If you need to *do something* -> **watch** - If you need to *compute something* -> **computed** --- ## Summary (ideal for an interview) > **watch is needed to run side effects when reactive data changes: requests, saving, logging, DOM work, and reacting to props and route.** > **It's used for things computed shouldn't be doing.**For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.