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.
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 14compute: 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.
- 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.
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 14