Now.js Framework Documentation

ReactiveManager

EN 15 Dec 2025 01:19

ReactiveManager

Overview

ReactiveManager is the reactivity system in Now.js Framework that enables automatic UI updates when data changes. It uses Proxy-based reactivity similar to Vue 3.

When to use:

Want UI to update automatically when data changes
Need computed values that cache and re-compute when dependencies change
Need to watch for data changes
Need reactive state for components

Why use it:

✅ Proxy-based reactivity (Vue 3 style)
✅ Automatic dependency tracking
✅ Computed values with caching
✅ Watch and WatchEffect
✅ Batch updates for performance
✅ Deep reactivity for nested objects
✅ Array change detection

Basic Usage

Create Reactive Object

// Create reactive object
const state = ReactiveManager.reactive({
  count: 0,
  user: {
    name: 'John',
    age: 25
  },
  items: []
});

// Change values - UI updates automatically
state.count++;
state.user.name = 'Jane';
state.items.push({ id: 1, title: 'Item 1' });

Effect

Effect is a function that runs when dependencies change:

// Create effect
const stopEffect = ReactiveManager.effect(() => {
  console.log('Count is:', state.count);
  document.querySelector('#count').textContent = state.count;
});

// When state.count changes, effect runs automatically
state.count++; // Console: "Count is: 1"

// Stop effect
stopEffect();

Computed

Computed is a value calculated from reactive data with caching:

const state = ReactiveManager.reactive({
  price: 100,
  quantity: 2,
  discount: 10
});

// Create computed
const total = ReactiveManager.computed(() => {
  return state.price * state.quantity * (1 - state.discount / 100);
});

console.log(total.value); // 180

// When dependencies change, computed re-calculates
state.quantity = 3;
console.log(total.value); // 270

Watch

Watch tracks changes and calls callback:

// Watch effect - track a function
const stopWatch = ReactiveManager.watch(
  () => state.count,
  (newValue) => {
    console.log('Count changed to:', newValue);
  }
);

// Watch property - track property directly
const stopWatch2 = ReactiveManager.watchProp(
  state,
  'count',
  (value) => {
    console.log('Count is now:', value);
  }
);

// Stop watching
stopWatch();
stopWatch2();

Reactive Objects

reactive()

Convert plain object to reactive object:

const user = ReactiveManager.reactive({
  name: 'John',
  email: 'john@example.com',
  profile: {
    avatar: '/images/avatar.jpg',
    bio: 'Developer'
  }
});

// Nested objects are also reactive
user.profile.bio = 'Senior Developer'; // Triggers update

Check if Reactive

// Check if value is reactive
if (ReactiveManager.isReactive(user)) {
  console.log('User is reactive');
}

// Or use isProxy
if (ReactiveManager.isProxy(user)) {
  console.log('User is a proxy');
}

Array Reactivity

Arrays support full reactivity:

const state = ReactiveManager.reactive({
  items: []
});

// Array methods work normally
state.items.push({ id: 1, name: 'Item 1' });
state.items.splice(0, 1);
state.items.unshift({ id: 2, name: 'Item 2' });

// Length change also triggers update
state.items.length = 0; // Clear array

Effect System

effect()

Create effect that runs when dependencies change:

const state = ReactiveManager.reactive({
  firstName: 'John',
  lastName: 'Doe'
});

// Effect automatically tracks dependencies
const stop = ReactiveManager.effect(() => {
  // Every time firstName or lastName changes
  // this function runs automatically
  const fullName = `${state.firstName} ${state.lastName}`;
  document.querySelector('#name').textContent = fullName;
});

state.firstName = 'Jane'; // UI updates automatically

// Stop effect
stop();

Effect Cleanup

Effect returns a function for cleanup:

function setupComponent() {
  const stop = ReactiveManager.effect(() => {
    // Update UI
  });

  // Return cleanup function
  return () => {
    stop();
  };
}

Computed Values

computed()

Create computed value that caches and re-computes when needed:

const cart = ReactiveManager.reactive({
  items: [
    { name: 'Item 1', price: 100, qty: 2 },
    { name: 'Item 2', price: 50, qty: 3 }
  ],
  discount: 10
});

// Computed: calculates when dependencies change
const subtotal = ReactiveManager.computed(() => {
  return cart.items.reduce((sum, item) => sum + item.price * item.qty, 0);
});

const total = ReactiveManager.computed(() => {
  return subtotal.value * (1 - cart.discount / 100);
});

console.log(subtotal.value); // 350
console.log(total.value);    // 315

// When items change, computed re-calculates
cart.items.push({ name: 'Item 3', price: 25, qty: 4 });
console.log(subtotal.value); // 450
console.log(total.value);    // 405

Computed Caching

Computed values are cached until dependencies change:

const expensive = ReactiveManager.computed(() => {
  console.log('Computing...');
  return heavyCalculation(state.data);
});

// First time: calculates
console.log(expensive.value); // "Computing..." then shows result

// Next times: uses cache
console.log(expensive.value); // No "Computing..."
console.log(expensive.value); // No "Computing..."

// When state.data changes
state.data = newData;
console.log(expensive.value); // "Computing..." again

Watch System

watch()

Track changes to reactive data:

// Watch getter function
const stop = ReactiveManager.watch(
  () => state.user.name,
  (newValue) => {
    console.log('Name changed to:', newValue);
    saveToServer({ name: newValue });
  }
);

// Watch with callback
ReactiveManager.watch(
  () => state.count,
  (value) => {
    if (value > 100) {
      alert('Count exceeded 100!');
    }
  }
);

watchEffect()

Watch that runs immediately and tracks dependencies:

const stop = ReactiveManager.watchEffect(
  // Getter
  () => state.searchQuery,
  // Callback
  async (query) => {
    if (query.length >= 3) {
      const results = await search(query);
      state.results = results;
    }
  }
);

watchProp()

Watch specific property of an object:

const stop = ReactiveManager.watchProp(
  state,           // Target object
  'count',         // Property name
  (value) => {     // Callback
    console.log('Count is:', value);
  },
  { immediate: true } // Options
);

watchDeep()

Watch deep changes in nested objects:

const stop = ReactiveManager.watchDeep(
  state.user,
  (user) => {
    console.log('User changed:', user);
    saveUser(user);
  }
);

// Triggers watch
state.user.profile.bio = 'Updated bio';

Component Integration

createComponentState()

Create reactive state for a component:

ComponentManager.define('my-component', {
  reactive: true,
  state: {
    count: 0
  },
  mounted() {
    // State is automatically converted to reactive
    this.state.count++; // Triggers re-render
  }
});

Manual Integration

function MyComponent() {
  const state = ReactiveManager.reactive({
    count: 0,
    items: []
  });

  // Setup effect to update DOM
  const cleanup = ReactiveManager.effect(() => {
    render(state);
  });

  return {
    state,
    cleanup
  };
}

Configuration

await ReactiveManager.init({
  // Show debug logs
  debug: false,

  // Batch updates in microtask
  batchUpdates: true,

  // Cleanup interval (ms)
  cleanupInterval: 60000,

  // Computed settings
  computed: {
    cache: true  // Enable caching
  }
});

API Reference