Computed Properties

Computed properties are reactive values derived from your data. Define them as functions that return calculated results - WakaPAC automatically tracks which properties they access and updates the DOM when those dependencies change.

How Computed Properties Work

Computed properties are JavaScript getter functions with intelligent dependency tracking:

1. When you define a computed property, WakaPAC analyzes it to determine which data properties it depends on
2. When a property changes, WakaPAC only re-evaluates expressions and computed properties that depend on that specific property
3. If a computed property's result changed, WakaPAC updates the affected parts of the DOM
4. If the result didn't change, the DOM is left untouched

Basic Computed Properties

Define computed properties in the computed object. They can access any data properties using this:

<div id="app">
    <p>First: <input data-pac-bind="value: firstName"></p>
    <p>Last: <input data-pac-bind="value: lastName"></p>
    <p>Full name: {{fullName}}</p>
</div>

<script>
    wakaPAC('#app', {
        firstName: 'John',
        lastName: 'Doe',

        computed: {
            fullName() {
                return `${this.firstName} ${this.lastName}`;
            }
        }
    });
</script>

When you type in either input, WakaPAC detects the change to firstName or lastName, knows that fullName depends on those properties, and updates the display.

Array Operations in Computed Properties

Computed properties can use JavaScript array methods to process data. Since they're regular JavaScript functions, you have full access to map(), filter(), reduce(), and other array methods:

<div id="app">
    <ul data-pac-bind="foreach: items" data-pac-item="item">
        <li>{{item.name}}: ${{item.price}}</li>
    </ul>

    <p>Total items: {{itemCount}}</p>
    <p>Total price: ${{totalPrice}}</p>
</div>

<script>
    wakaPAC('#app', {
        items: [
            { name: 'Widget', price: 10 },
            { name: 'Gadget', price: 20 },
            { name: 'Doohickey', price: 15 }
        ],

        computed: {
            itemCount() {
                return this.items.length;
            },

            totalPrice() {
                return this.items.reduce((sum, item) => sum + item.price, 0);
            }
        }
    });
</script>

WakaPAC's reactive arrays automatically trigger updates when you use push(), splice(), pop(), shift(), unshift(), or modify array elements directly.

Chained Computed Properties

Computed properties can depend on other computed properties. WakaPAC tracks the entire dependency chain:

<div id="app">
    <p>Price: $<input data-pac-bind="value: price" type="number"></p>
    <p>Quantity: <input data-pac-bind="value: quantity" type="number"></p>

    <p>Subtotal: ${{subtotal}}</p>
    <p>Tax (10%): ${{tax}}</p>
    <p><strong>Total: ${{total}}</strong></p>
</div>

<script>
    wakaPAC('#app', {
        price: 29.99,
        quantity: 2,

        computed: {
            subtotal() {
                return this.price * this.quantity;
            },

            tax() {
                return this.subtotal * 0.1;  // Depends on subtotal
            },

            total() {
                return this.subtotal + this.tax;  // Depends on both
            }
        }
    });
</script>

When price changes: subtotal recalculates â†' tax recalculates (depends on subtotal) â†' total recalculates (depends on subtotal and tax). WakaPAC handles the cascade automatically.

Filtering and Sorting Arrays

Use computed properties to create filtered or sorted views of your data:

<div id="app">
    <input data-pac-bind="value: searchTerm" placeholder="Search tasks...">

    <ul data-pac-bind="foreach: filteredTasks" data-pac-item="task">
        <li>{{task.title}}</li>
    </ul>

    <p>Showing {{filteredTasks.length}} of {{tasks.length}} tasks</p>
</div>

<script>
    wakaPAC('#app', {
        searchTerm: '',
        tasks: [
            { title: 'Buy groceries' },
            { title: 'Write documentation' },
            { title: 'Review pull request' }
        ],

        computed: {
            filteredTasks() {
                return this.tasks.filter(task =>
                    task.title.toLowerCase().includes(this.searchTerm.toLowerCase())
                );
            }
        }
    });
</script>

Performance Considerations

Computed properties only recalculate when their dependencies change. WakaPAC's dependency tracking ensures that changing firstName won't trigger recalculation of a computed property that only depends on items.

For best performance:

• Computed properties are efficient - they only run when their specific dependencies change
• Computed properties can safely reference other computed properties
• Each computed property is evaluated at most once per dependency change, even if used multiple times in the template

computed: {
    // This only recalculates when 'items' changes
    expensiveCalculation() {
        return this.items
            .map(item => /* complex processing */)
            .reduce((sum, val) => sum + val, 0);
    },

    // This only recalculates when 'firstName' or 'lastName' changes
    fullName() {
        return `${this.firstName} ${this.lastName}`;
    }
}

// Changing firstName won't recalculate expensiveCalculation
// Changing items won't recalculate fullName

Best Practices

• Pure functions: Computed properties should only read data and return values - don't modify properties or trigger side effects
• Any complexity is fine: Since they only run when dependencies change, don't worry about expensive operations
• No assignments: Don't try to assign values to computed properties - they're read-only getters. Modify the source data instead
• Predictable dependencies: Try to access the same properties every time for most consistent behavior, though conditional access is supported