Reactivity API: Core | Vue.js

Reactivity: Utilities
Reactivity: Advanced
Dependency Injection
Options: Composition
Syntax Specification
Server-Side Rendering
TypeScript Utility Types
To better understand the Reactivity APIs, it is recommended to read the following chapters in the guide:
Takes an inner value and returns a reactive and mutable ref object, which has a single property .value that points to the inner value.
The ref object is mutable - i.e. you can assign new values to .value. It is also reactive - i.e. any read operations to .value are tracked, and write operations will trigger associated effects.
If an object is assigned as a ref's value, the object is made deeply reactive with reactive(). This also means if the object contains nested refs, they will be deeply unwrapped.
To avoid the deep conversion, use shallowRef() instead.
Takes a getter function and returns a readonly reactive ref object for the returned value from the getter. It can also take an object with get and set functions to create a writable ref object.
Creating a readonly computed ref:
Creating a writable computed ref:
Returns a reactive proxy of the object.
The reactive conversion is "deep": it affects all nested properties. A reactive object also deeply unwraps any properties that are refs while maintaining reactivity.
It should also be noted that there is no ref unwrapping performed when the ref is accessed as an element of a reactive array or a native collection type like Map.
To avoid the deep conversion and only retain reactivity at the root level, use shallowReactive() instead.
The returned object and its nested objects are wrapped with ES Proxy and not equal to the original objects. It is recommended to work exclusively with the reactive proxy and avoid relying on the original object.
Creating a reactive object:
Note that refs are not unwrapped when accessed as array or collection elements:
When assigning a ref to a reactive property, that ref will also be automatically unwrapped:
Takes an object (reactive or plain) or a ref and returns a readonly proxy to the original.
A readonly proxy is deep: any nested property accessed will be readonly as well. It also has the same ref-unwrapping behavior as reactive(), except the unwrapped values will also be made readonly.
To avoid the deep conversion, use shallowReadonly() instead.
Runs a function immediately while reactively tracking its dependencies and re-runs it whenever the dependencies are changed.
The first argument is the effect function to be run. The effect function receives a function that can be used to register a cleanup callback. The cleanup callback will be called right before the next time the effect is re-run, and can be used to clean up invalidated side effects, e.g. a pending async request (see example below).
The second argument is an optional options object that can be used to adjust the effect's flush timing or to debug the effect's dependencies.
By default, watchers will run just prior to component rendering. Setting flush: 'post' will defer the watcher until after component rendering. See Callback Flush Timing for more information. In rare cases, it might be necessary to trigger a watcher immediately when a reactive dependency changes, e.g. to invalidate a cache. This can be achieved using flush: 'sync'. However, this setting should be used with caution, as it can lead to problems with performance and data consistency if multiple properties are being updated at the same time.
The return value is a handle function that can be called to stop the effect from running again.
Stopping the watcher:
Pausing / resuming the watcher:
Side effect cleanup:
Side effect cleanup in 3.5+:
Alias of watchEffect() with flush: 'post' option.
Alias of watchEffect() with flush: 'sync' option.
Watches one or more reactive data sources and invokes a callback function when the sources change.
Types are simplified for readability.
watch() is lazy by default - i.e. the callback is only called when the watched source has changed.