Valores Computados

Vuecomputed

<script setup lang="ts">
import { computed, ref } from 'vue'

const price = ref(8)
const quantity = ref(1)
const total = computed(() => price.value * quantity.value)

function incrementQuantity() {
  quantity.value++
}
</script>

<template>
  <button @click="incrementQuantity">
    Add item
  </button>

  <p>Total: {{ total }}</p>
</template>

Usa computed para derivar automáticamente un valor a partir de otros valores reactivos.

Vue docs

Reactderived value

import { useState } from 'react'

function CartTotal() {
  const price = 8
  const [quantity, setQuantity] = useState(1)
  const total = price * quantity

  function incrementQuantity() {
    setQuantity(quantity + 1)
  }

  return (
    <>
      <button onClick={incrementQuantity}>
        Add item
      </button>

      <p>Total: {total}</p>
    </>
  )
}

Calcula el total directamente durante el render a partir del estado disponible, sin guardarlo como estado adicional.

React docs

Angularcomputed

import { Component, computed, signal } from '@angular/core'

@Component({
  selector: 'app-cart-total',
  standalone: true,
  template: `
    <button (click)="incrementQuantity()">
      Add item
    </button>

    <p>Total: {{ total() }}</p>
  `,
})
export class CartTotalComponent {
  price = signal(8)
  quantity = signal(1)
  total = computed(() => this.price() * this.quantity())

  incrementQuantity() {
    this.quantity.update((value) => value + 1)
  }
}

Usa computed para derivar un valor a partir de otros signals sin convertirlo en estado independiente.

Angular docs