Reactivity API

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

• @vue/reactivity
• @vue/runtime-core

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:

• Vue 3 Reactivity API

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