`watchEffect()`

Runs an effect immediately and re-runs it when its dependencies change.

Since Vue 3.0 Spec ↗

Syntax

watchEffect(effect, options?): WatchHandle

Parameters

Name	Type	Required	Description
`effect`	`(onCleanup) => void`	No	Function whose reactive reads become tracked dependencies.
`options`	`object`	No	flush timing and onTrack/onTrigger debug hooks.

Returns

WatchHandle — A function to stop the effect.

Examples

<script setup lang="ts">
import { ref, watchEffect } from 'vue';

const id = ref(1);
watchEffect(async (onCleanup) => {
  const ctrl = new AbortController();
  onCleanup(() => ctrl.abort());
  const r = await fetch(`/api/users/${id.value}`, { signal: ctrl.signal });
  console.log(await r.json());
});
</script>

Notes

Unlike watch, watchEffect runs immediately and automatically tracks any reactive value read synchronously inside it, with no explicit source list. Use it for effects depending on several values; use watch when you need the previous value or precise control over which sources trigger it.