computed
Derive a read-only value by tracking the refs read during a computation.
Derive a read-only value by tracking the refs read during a computation.
Overview
The computed function allows you to create a computed property that depends on reactive data and automatically updates when its dependencies change. Computed properties are useful for performing complex calculations or transformations on reactive data.
Try it live
Three read-only values, three ways to specify their dependencies.
import { computed, computeMany, computeRef, html, ref } from 'regor'
export function createDerived(interactive = false) {
const seats = ref(4)
const price = ref(25)
return {
interactive,
seats,
price,
total: computed(() => seats() * price()),
double: computeRef(seats, (value) => value * 2),
combined: computeMany([seats, price], (count, cost) => count + cost),
}
}
export const derivedTemplate = html` <div class="guide-demo">
<div class="guide-filter">
<label
>Seats · {{ seats }}<input
type="range"
min="1"
max="12"
r-model.number="seats"
:value="seats"
:disabled="!interactive" /></label
><label
>Price · {{ price }}<input
type="range"
min="10"
max="50"
step="5"
r-model.number="price"
:value="price"
:disabled="!interactive"
/></label>
</div>
<div class="guide-metrics">
<div>
<output class="api-derived-total">{{ total }}</output
><span>computed · seats × price</span>
</div>
<div><output>{{ double }}</output><span>computeRef · seats × 2</span></div>
<div>
<output>{{ combined }}</output><span>computeMany · seats + price</span>
</div>
</div>
<p class="guide-hint">
Three read-only values, three ways to specify their dependencies.
</p>
</div>`import { createApp, RegorConfig, useScope } from 'regor'
import { apiExamples } from './examples'
const element = document.getElementById('api-demo')
const name = element?.dataset.example
if (element && name && Object.hasOwn(apiExamples, name)) {
const example = apiExamples[name as keyof typeof apiExamples]
const scope = useScope<object>(() => example.create(true))
const config =
'config' in scope.context && scope.context.config instanceof RegorConfig
? scope.context.config
: undefined
createApp(scope, { element, template: example.template }, config)
}Move either slider. The three read-only outputs use computed, computeRef, and computeMany.
Usage
Creating Computed Properties
To create a computed property using computed, you provide a function (compute) that calculates the computed value based on reactive data. The computed property will automatically update whenever the reactive data it depends on changes.
import { computed, ref } from 'regor'
const myRef = ref(5)
// Create a computed property
const computedValue = computed(() => myRef.value * 2)
console.log(computedValue.value) // Outputs 10
// Later, when myRef changes, computedValue will automatically update
myRef.value = 7
console.log(computedValue.value) // Outputs 14Parameters
compute: A function that calculates the computed value based on reactive data. This function should not have any side effects and should only depend on reactive data.
Return Value
- The
computedfunction returns a computed ref object that holds the calculated value. You can access the computed value using the.valueproperty of the computed ref or by invoking it directly.
Example
import { computed, ref } from 'regor'
const myRef = ref(5)
// Create a computed property
const computedValue = computed(() => myRef.value * 2)
console.log(computedValue.value) // Outputs 10
// Later, when myRef changes, computedValue will automatically update
myRef.value = 7
console.log(computedValue.value) // Outputs 14Read source state and return a result. Put side effects in watchEffect or explicit observers.