watchEffect

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.

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.