Anchor Docs

Appearance

Introduction to Anchor for Vue ​

As a Vue developer, you're already benefiting from Vue's reactivity system and component-based architecture. However, even with Vue's excellent built-in reactivity, you might encounter challenges when building complex applications that require sophisticated state management.

Background Problems ​

Despite Vue's excellent reactivity system, many developers encounter recurring issues when building complex applications:

  • Limited Reactivity Scope: Vue's reactivity system, while powerful, can become complex when managing deeply nested objects or when sharing state across multiple components.

  • State Sharing Complexity: Sharing reactive state across components in large applications often requires complex patterns like provide/inject or event buses, making code harder to maintain and understand.

  • Coarse-Grained Reactivity: Vue's reactivity typically triggers updates on entire objects or arrays rather than specific properties, which can lead to unnecessary re-renders in large applications.

  • Lack of Explicit Reactivity Control: Vue doesn't provide fine-grained control over what triggers reactivity, making it difficult to optimize performance in complex applications with many interconnected components.

The Solution: Anchor for Vue ​

Anchor addresses these challenges by providing a revolutionary approach to state management that complements Vue's existing reactivity system:

Fine-Grained Reactivity ​

Unlike Vue's coarse-grained reactivity, Anchor allows you to observe only specific parts of your state. This means components re-render only when the exact data they depend on changes, not when unrelated parts of the state are modified.

vue
<script setup>
import { anchorRef, observedRef } from '@anchorlib/vue';

const userState = anchorRef({
  profile: { name: 'John', age: 30 },
  preferences: { theme: 'dark' },
});

// This only re-renders when profile.name changes, not when preferences change
const userName = observedRef(() => userState.value.profile.name);
</script>

<template>
  <h1>Hello, {{ userName }}!</h1>
</template>

Framework Agnostic State Sharing ​

With Anchor, you can declare your state anywhere and share it across any framework since it's framework agnostic. This makes it especially powerful for micro-frontend architectures or when migrating between frameworks.

True Immutability with Direct Mutations ​

Anchor provides true immutability while still allowing direct mutations through controlled contracts. This gives you the safety of immutable state without the performance overhead of deep cloning.

Enhanced Performance ​

By combining Vue's reactivity with Anchor's fine-grained reactivity, you can achieve even better performance than with Vue's built-in reactivity alone.

Key Benefits ​

1. Superior Performance ​

  • Fine-grained reactivity eliminates unnecessary re-renders
  • Zero-copy mutations for better memory efficiency
  • Automatic memory management prevents leaks

2. Simplified State Management ​

  • No need for complex patterns to share state
  • Direct mutations with safety through contracts
  • Built-in schema validation and error handling

3. Seamless Integration ​

  • Works alongside Vue's existing reactivity
  • Compatible with both Vue 2 and Vue 3
  • No major refactoring required for existing applications

4. Enhanced Developer Experience ​

  • Intuitive APIs that feel natural to Vue developers
  • Comprehensive TypeScript support
  • Built-in debugging tools

What You'll Gain ​

  • Enhanced Performance: Take Vue's already excellent performance to the next level with fine-grained reactivity
  • Simplified State Sharing: Share state across components without complex patterns or boilerplate
  • Predictable State Management: True immutability with controlled mutations eliminates entire classes of bugs
  • Cleaner Code: Reduce boilerplate and write state management logic that's easier to read and maintain
  • Scalability: Anchor's design scales effortlessly from small components to large, enterprise-level applications

Anchor empowers you to build high-performance, maintainable, and scalable Vue applications with a state management solution that complements and enhances Vue's existing strengths. Let's dive in!