Vue Academy · Lección

Propiedades computadas

Obtenga valores reactivos almacenados en caché mediante propiedades computadas

Propiedades computadas es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 2 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 3 lecciones en total.

¿Qué es una propiedad computada?

Una propiedad computada deriva un valor a partir de otros datos reactivos.

Se recalcula únicamente cuando cambian sus dependencias
Se lee como una propiedad normal en las plantillas
Mantiene limpias las plantillas al trasladar la lógica a JS

Definición de una propiedad computada

En la Composition API, use la función computed.

import { ref, computed } from "vue"

const firstName = ref("Ada")
const lastName = ref("Lovelace")

const fullName = computed(() => {
  return firstName.value + " " + lastName.value
})

Uso de una propiedad computada en la plantilla

Se accede a una propiedad computada como a una propiedad de datos, sin paréntesis.

<template>
  <p>{{ fullName }}</p>
</template>

<!-- fullName updates automatically when
     firstName or lastName change -->

Propiedades computadas frente a métodos

Un método también devuelve un valor, así que ¿por qué usar una propiedad computada?

Una propiedad computada se almacena en caché según sus dependencias
Un método se ejecuta cada vez que se llama durante un renderizado

Las propiedades computadas son más eficientes para valores derivados que se utilizan repetidamente.

La caché en acción

Una propiedad computada se vuelve a ejecutar únicamente cuando cambia una dependencia. Si la lee varias veces, se reutiliza el resultado almacenado en caché.

const expensive = computed(() => {
  console.log("computing...")
  return heavyCalculation(data.value)
})

// Reading expensive twice in one render
// logs "computing..." only once

Los métodos se ejecutan cada vez

En cambio, un método vuelve a calcular el resultado en cada llamada, aunque las entradas no hayan cambiado.

// In template: {{ getTotal() }} {{ getTotal() }}
// Calls getTotal twice, recomputing both times

methods: {
  getTotal() {
    return this.price * this.qty
  }
}

computed en la Options API

La Options API declara las propiedades computadas en un bloque computed.

export default {
  data() {
    return { price: 10, qty: 3 }
  },
  computed: {
    total() {
      return this.price * this.qty
    }
  }
}

Getters de propiedades computadas

De forma predeterminada, una propiedad computada es de solo lectura: solo tiene un getter.

El getter se ejecuta para producir el valor cada vez que cambian las dependencias.

const doubled = computed(() => count.value * 2)

// You can read doubled.value
// but assigning to it would warn

Setters de propiedades computadas

Puede hacer que una propiedad computada sea editable proporcionando una función get y otra set.

const fullName = computed({
  get() {
    return first.value + " " + last.value
  },
  set(newValue) {
    const parts = newValue.split(" ")
    first.value = parts[0]
    last.value = parts[1]
  }
})

Uso del setter

Cuando asigna un valor a una propiedad computada editable, se ejecuta su setter.

fullName.value = "Grace Hopper"

// The setter splits and assigns:
// first.value -> "Grace"
// last.value  -> "Hopper"

Cuándo usar propiedades computadas

Use computed cuando necesite un valor derivado de un estado reactivo.

Filtrar u ordenar una lista
Dar formato a los datos para mostrarlos
Combinar varios valores en uno solo

Use watchers (en la siguiente lección) cuando necesite reaccionar con efectos secundarios.

Comprobación rápida

Compruebe sus conocimientos sobre las propiedades computadas.

Repaso: propiedades computadas

Ha aprendido sobre el estado derivado:

computed deriva valores a partir de datos reactivos
Se almacena en caché y se vuelve a calcular únicamente cuando cambian las dependencias
Los métodos se ejecutan en cada llamada; las propiedades computadas no
Una propiedad computada puede tener un getter y un setter opcional

A continuación: watchers y reactividad profunda.

Preguntas frecuentes

¿La lección «Propiedades computadas» es gratis?

Sí — el texto completo de «Propiedades computadas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 3 lecciones en total.

¿Qué aprenderé en «Propiedades computadas»?

Obtenga valores reactivos almacenados en caché mediante propiedades computadas Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Vue Academy?

No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 3.

¿Cuánto tiempo toma la lección «Propiedades computadas»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Vue Academy?

Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Vue Academy