Skip to content

watchEffect

watchEffect immediately runs a function while auto-tracking reactive deps. This lesson covers practical patterns, syntax, and mistakes to avoid.

Auto-Tracking Effects

watchEffect immediately runs a function while auto-tracking reactive deps.

Great for lightweight synchronization; less explicit than watch.

watchEffect(() => {
  console.log(count.value)
})

Logs whenever count changes (and once immediately).

Invalidate

onInvalidate for async cleanup.
  • Prefer Composition API + script setup.
  • Use computed for derived UI.
  • Keep side effects intentional.
  • Practice in a small Vite app.

watchEffect Cheatsheet

Quick reference for patterns covered in this lesson.

Item Example Purpose
auto deps read tracking Core
immediate default Behavior
onInvalidate cleanup Async
debugOptions trace Dev
prefer watch explicit Clarity
SSR care Run

Explicit vs Implicit

Use watch when dependencies should be obvious.

Common Mistakes

  • Huge watchEffect blocks with unclear deps.
  • Fetching without race handling.

Key Takeaways

  • watchEffect is important in Vue apps.
  • Practice in SFCs.
  • Prefer clear naming.
  • Check Vue docs for details.

Pro Tip

For fetches, watch with explicit userId is usually clearer.

You now understand watcheffect. Next, continue with Lifecycle Hooks to keep building your Vue skills.