Non-Reactive Properties

Non-reactive properties are excluded from WakaPAC's reactivity system. Use them for third-party library instances, cached data, or internal state that doesn't need to trigger DOM updates.

Defining Non-Reactive Properties

Prefix properties with an underscore or dollar sign to make them non-reactive:

<div id="app">
    <p>Count: {{count}}</p>
    <button data-pac-bind="click: increment">Increment</button>
    <p>Total calls: {{_callCount}}</p>
</div>

<script>
    wakaPAC('#app', {
        // Reactive property - triggers DOM updates
        count: 0,

        // Non-reactive property - no DOM updates
        _callCount: 0,

        increment() {
            this.count++;           // Updates the DOM
            this._callCount++;      // Internal tracking only
            console.log('Calls:', this._callCount);
        }
    });
</script>

The count property triggers DOM updates. The _callCount property changes but doesn't trigger any updates - it's for internal use only.

When to Use Non-Reactive Properties

Use Case Example Why Non-Reactive
Third-party objects Map instances, chart objects, WebSocket connections Complex objects don't need reactivity and may break if proxied
Large datasets 10,000+ item arrays, cached API responses Reactivity overhead is expensive for data not shown in templates
Internal state Counters, timestamps, debug info Values used for logic but never displayed
Callbacks/Timers setInterval IDs, event listeners, animation frames References to browser APIs don't need tracking
Computed caches Memoization results, expensive calculations Intermediate values for performance optimization

Key Principles

  • Prefix with underscore or dollar sign: Any property starting with _ or $ is non-reactive
  • Performance optimization: Reduces memory overhead and improves performance for large or complex data
  • Third-party safety: Prevents proxying of objects that may not handle it well
  • Not in templates: Non-reactive properties can be used in methods but won't trigger updates if used in templates
  • Still accessible: Non-reactive properties are fully accessible via this._property or this.$property