Effective scope for cleanup in Vue - Step-by-Step Execution

Concept Flow - Effective scope for cleanup

Component Setup

↓

Create Reactive State

↓

Register Effect or Watch

↓

Effect Runs

↓

Component Unmount

↓

Cleanup Function Runs

↓

Resources Freed

↓

Component Removed or Updated

This flow shows how Vue sets up reactive effects and cleans them up automatically when the component unmounts.

Execution Sample

Vue

import { ref, watchEffect, onUnmounted } from 'vue'

const count = ref(0)
const stop = watchEffect(() => {
  console.log(`Count is: ${count.value}`)
})
onUnmounted(() => stop())

This code sets up a reactive effect that logs count changes and cleans up the watcher when the component unmounts.

Execution Table

Step	Action	Reactive State	Effect Status	Cleanup Status	Output
1	Initialize count = 0	count=0	No effect yet	No cleanup
2	Start watchEffect	count=0	Effect active	No cleanup	Logs: Count is: 0
3	Update count to 1	count=1	Effect re-runs	No cleanup	Logs: Count is: 1
4	Component unmount triggers cleanup	count=1	Effect stopped	Cleanup function called
5	Effect stopped, no further logs	count=1	No effect	Cleanup done

💡 Cleanup runs when component unmounts, stopping the effect and freeing resources.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
count	0	0	1	1	1
Effect active	false	true	true	false	false
Cleanup called	false	false	false	true	true

Key Moments - 2 Insights

Why does the cleanup function run only when the component unmounts?

Because Vue calls the cleanup registered by onUnmounted only when the component is removed, as shown in step 4 of the execution_table.

What happens if we don't call the cleanup function returned by watchEffect?

Vue automatically stops the effect on component unmount, preventing memory leaks or unwanted side effects. Manual cleanup provides explicit control.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of count after step 3?

A 1

B 0

C undefined

D null

💡 Hint

Check the 'Reactive State' column at step 3 in the execution_table.

At which step does the cleanup function run?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look at the 'Cleanup Status' column in the execution_table.

If we remove the onUnmounted cleanup call, what happens to the effect after unmount?

A Effect runs only once

B Effect stops automatically

C Effect keeps running causing potential leaks

D Effect throws an error

💡 Hint

Vue automatically cleans up reactive effects created in setup() on component unmount.

Concept Snapshot

Vue cleanup scope:
- Setup reactive effect with watchEffect
- Effect runs immediately and on dependency changes
- Vue automatically cleans up effects on component unmount
- Manual cleanup: onUnmounted(() => stop())
- Prevents memory leaks and stale effects

Full Transcript

In Vue, when you create reactive effects using watchEffect, the effect runs immediately and whenever its dependencies change. Vue automatically cleans up these effects when the component unmounts. Vue provides onUnmounted to register cleanup functions. The cleanup function returned by watchEffect stops the effect from running further. This process ensures resources are freed and the component behaves correctly. The execution table shows the effect starting, running on state change, and cleaning up on unmount.