# Reactivity API

Ovee.js reactivity is based on Vue 3 reactivity system. It uses two packages:

Features are filtered from these packages, but if you ever feel like something is missing, just create a new issue! 👉 Ovee.js

Most of this documentation links to external Vue 3 docs, as they did a great job documenting all of it's features and functionalities! So for explicit explenation of every feature (except ReactiveProxy and makeComponentReactive), we recommend going straight there:

# ReactiveProxy

Utility class, that creates Vue 3 reactive instance and allows you for a selective field reactivity. You can find it in Components, that uses any decorator which requires from a component to be reactive. It's applied through helper makeComponentReactive and you probably don't need to use it at all.

# makeComponentReactive

Applies ReactiveProxy on a component and saves it's instance under protectedFields.REACTIVE_PROXY, only if given object already doesn't have ReactiveProxy applied. It's useful if you make a custom decorator which functionality is based on reactivity of a component. In any other case, you don't really need it.

# Reactive objects API

  • makeReactive - Used to create reactive objects. Alias for Vue 3: reactive
  • makeComputed - Used to create computed function with lazy evaluation, that reevaluates only when reactive dependencies change. Alias for Vue 3: computed
  • readonly - Create readonly proxy object. Vue 3 docs: readonly
  • isProxy - Check if object is Proxy created by makeReactive or readonly. Vue 3 docs: isProxy
  • isReactive - Check if object was created by makeReactive. Vue 3 docs: isReactive
  • isReadonly - Check if object was ceated by readonly. Vue 3 docs: isReadonly
  • toRaw - Returns target object of makeReactive proxy. Vue 3 docs: toRaw
  • markRaw - Prevent object from converting to reactive one. Vue 3 docs: markRaw
  • shallowReactive - Creates a reactive proxy that tracks reactivity of its own properties but does not perform deep reactive conversion of nested objects (exposes raw values). Vue 3 docs: shallowReactive
  • shallowReadonly - Creates a proxy that makes its own properties readonly, but does not perform deep readonly conversion of nested objects (exposes raw values). Vue 3 docs: shallowReactive

# Ref API

  • ref - Creates reactive mutable object with field .value for single value. Vue 3 docs: ref
  • unref - Return inner value if argument is ref, else return argument untouched. Vue 3 docs: unref
  • toRef - Create ref from a reactive objects single property, retaining it's reactivity. Vue 3 docs: toRef
  • toRefs - Same as toRef, but for a whole object, where each field is a ref. Vue 3 docs: toRefs
  • isRef - Check if value is ref object. Vue 3 docs: isRef
  • customRef - Creates a customized ref with explicit control over its dependency tracking and updates triggering. Vue 3 docs: customRef
  • shallowRef - Creates a ref that tracks its own .value mutation but doesn't make its value reactive. Vue 3 docs: shallowRef
  • triggerRef - Execute any effects tied to a shallowRef manually. Vue 3 docs: triggerRef

# Watch API

  • doWatch - Watch for changes in specified source. Alias for Vue 3: watch
  • doWatchEffect - Immediate watch, that can automatically detect all reactive sources used inside. Alias for Vue 3: watchEffect
  • makeComputed - Creates a cachable function that recalculates its value whenever reactive values change inside. Alias for Vue 3: computed
Last Updated: 2/22/2023, 2:05:09 PM