What Is effect in Vue?

In Vue, effect is the lowest-level building block of Vue 3's reactivity system. It runs a function immediately, records the reactive values (ref, reactive) it reads as dependencies, and runs the function again whenever one of them changes. computed, watch, watchEffect and component re-rendering are all built on this mechanism.

effect does not take a dependency list; it only takes a function. It finds its dependencies itself by tracking which reactive values the function reads while it runs (automatic dependency tracking). It is not a replacement for Vue 2's beforeUpdate and updated hooks either — those hooks still exist in Vue 3 under the same names.

Example:

import { ref, effect } from 'vue';

const count = ref(0);

// effect runs once immediately and again whenever count changes
effect(() => {
  console.log('Count updated:', count.value);
});

// Every change to count runs the effect again
count.value++;

// The console shows "Count updated: 0" and then "Count updated: 1"

Because the function reads count.value while it runs, the effect depends on count. Each time count changes, the function runs again automatically and logs the new value.

Note: effect is a low-level API and is rarely used directly in application code. In components, use watchEffect for the same job — it is stopped automatically when the component is removed.