computed

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 Online

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 14

Parameters

• 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 computed function returns a computed ref object that holds the calculated value. You can access the computed value using the .value property 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 14

See Also

• ref
• observe
• observeMany
• watchEffect
• isDeepRef
• isRef
• unref
• sref
• flatten
• isRaw
• markRaw
• pause
• resume
• trigger

Back to the API list