Computed

computed is where Ornata components define derived values.

If state is the source of truth, computed is where you turn that state into values the rest of the component can read conveniently.

Why computed exists

Computed values help when:

• multiple render callbacks need the same derived value
• a method needs a value derived from several state properties
• you want derived logic in one named place instead of repeating it inline

A simple example

JavaScript

computed: {
    countLabel() {
        return this.state.count === 1 ? "item" : "items";
    },
}

TypeScript

interface CounterComputed {
    countLabel: string;
}

computed: {
    countLabel() {
        return this.state.count === 1 ? "item" : "items";
    },
}

Computed values update automatically

When state changes, Ornata recomputes every computed property.

Each computed callback receives a context object with:

• type
• currentValue
• changedProperty

currentValue is the previously computed value for that property.

changedProperty is the state key that triggered the recomputation.

That context is especially useful when a computed value is expensive to derive. You can check whether the changed state is actually relevant before redoing heavier work.

JavaScript

computed: {
    summary({ currentValue, changedProperty }) {
        console.log("Was:", currentValue);
        console.log("Triggered by:", changedProperty);

        return `${this.state.count} clicks`;
    },
}

TypeScript

computed: {
    summary({ currentValue, changedProperty }) {
        console.log("Was:", currentValue);
        console.log("Triggered by:", changedProperty);

        return `${this.state.count} clicks`;
    },
}

Use the context to avoid unnecessary work

For simple computed values, you can usually ignore the context object.

For more expensive computed values, currentValue and changedProperty let you skip work when the updated state does not affect the result.

JavaScript

computed: {
    filteredItems({ currentValue, changedProperty }) {
        if (
            changedProperty !== "query" &&
            changedProperty !== "items"
        ) {
            return currentValue ?? [];
        }

        return this.state.items.filter((item) =>
            item.label.includes(this.state.query)
        );
    },
}

TypeScript

computed: {
    filteredItems({ currentValue, changedProperty }) {
        if (
            changedProperty !== "query" &&
            changedProperty !== "items"
        ) {
            return currentValue ?? [];
        }

        return this.state.items.filter((item) =>
            item.label.includes(this.state.query)
        );
    },
}

This gives the component a chance to reuse the current computed value when unrelated state changes trigger the broader update flow.

Use computed from render and methods

Computed values are especially helpful when several parts of the component need the same derived data.

JavaScript

computed: {
    isOpen() {
        return this.state.open && this.state.enabled;
    },
},
render: {
    panel() {
        return {
            attributes: {
                hidden: !this.computed.isOpen,
            },
        };
    },
},
methods: {
    announce() {
        console.log(this.computed.isOpen);
    },
}

TypeScript

interface DisclosureComputed {
    isOpen: boolean;
}

computed: {
    isOpen() {
        return this.state.open && this.state.enabled;
    },
},
render: {
    panel() {
        return {
            attributes: {
                hidden: !this.computed.isOpen,
            },
        };
    },
},
methods: {
    announce() {
        console.log(this.computed.isOpen);
    },
}

Computed versus other options

• use computed for derived values
• use watch for side effects
• use data for persistent non-reactive storage
• use render for DOM output

A good mental model

If state is what the component knows, computed is what the component can infer from what it knows.