Anchor Docs

Appearance

Introduction to Anchor for Vue ​

Anchor enhances Vue's already excellent reactivity system by providing intuitive direct mutation for complex objects, true immutability, and data integrity.

FeatureVueAnchor for Vue
Fine-grained reactivity✅✅
Direct mutation✅ (reactive())✅ (anchorRef())
Nested reactivity✅✅
True immutability❌ (limited readonly)✅
Schema validation❌✅
Data integrity❌✅
Portability❌ (limited to Vue)✅
History Tracking❌✅

Why Anchor for Vue? ​

Vue's Composition API and Reactivity system are top-tier. However, for complex business logic, large applications often require more structure:

  • Managing complex nested state structures with validation
  • Ensuring true immutability for safe state sharing
  • Creating portable business logic that can be tested outside of Vue components
  • History tracking (undo/redo)

Anchor addresses these challenges while integrating seamlessly with Vue's ref system.

Key Benefits ​

1. Unified Reactivity and Refs ​

Anchor for Vue wraps its reactive proxies in standard Vue Refs using anchorRef. This means you can use them exactly like any other Ref in your components, but with supercharged capabilities.

ts
import { anchorRef } from '@anchorlib/vue';

const state = anchorRef({ count: 0, name: 'Vue' });

// Use standard .value access
state.value.count++;

2. True Immutability ​

Anchor provides true immutability throughout your application. Using immutableRef, you can expose safe, read-only versions of your state that cannot be mutated by consumers.

3. Data Integrity ​

With schema support and runtime validation, Anchor ensures your state maintains its structure and data types.

Vue Integration ​

Anchor's Vue integration effectively bridges Anchor's universal reactivity with Vue's render cycle:

  • anchorRef: Creates a Vue Ref backed by Anchor state.
  • derivedRef: Creates optimized computed properties.
  • Automatic cleanup on component unmount.

Learning Investment ​

If you know Vue's Composition API, you already know 90% of Anchor for Vue. The main difference is the enhanced capabilities of the state objects you create.